import { MediaGallery } from '@/components/media/MediaGallery';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
import { MediaViewData } from '@/lib/view-data/MediaViewData';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';

export function MediaTemplate({ viewData }: TemplateProps<MediaViewData>) {
  const { assets, categories, title, description } = viewData;
  
  return (
    <Container>
      <Box paddingY={8}>
        <Box display="flex" flexDirection="col" gap={8}>
          <MediaGallery
            assets={assets}
            categories={categories}
            title={title}
            description={description}
          />
        </Box>
      </Box>
    </Container>
  );
}