'use client';

import React from 'react';
import Link from 'next/link';
import { Button } from '@/ui/Button';
import { Plus } from 'lucide-react';
import { routes } from '@/lib/routing/RouteConfig';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/Box';
import { LiveryGallery } from '@/components/profile/LiveryGallery';
import type { ProfileLiveriesViewData } from '@/lib/view-data/ProfileLiveriesViewData';

interface ProfileLiveriesTemplateProps {
  viewData: ProfileLiveriesViewData;
}

export function ProfileLiveriesTemplate({ viewData }: ProfileLiveriesTemplateProps) {
  return (
    <Stack gap={8}>
      <Box as="header">
        <Stack direction="row" justify="between" align="center">
          <Heading level={1}>My Liveries</Heading>
          <Link href={routes.protected.profileLiveryUpload}>
            <Button variant="primary" size="sm" icon={<Plus size={16} />}>
              Upload Livery
            </Button>
          </Link>
        </Stack>
      </Box>

      <Box as="main">
        <LiveryGallery 
          liveries={viewData.liveries} 
        />
      </Box>
    </Stack>
  );
}