'use client';

import { MediaGallery } from '@/components/media/MediaGallery';
import { MediaViewData } from '@/lib/view-data/MediaViewData';
import { SharedBox, SharedContainer } from '@/components/shared/UIComponents';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';

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