import Link from 'next/link';
import { Button } from '@/ui/Button';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Grid } from '@/ui/Grid';
import { routes } from '@/lib/routing/RouteConfig';
import { LiveryCard } from '@/ui/LiveryCard';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

export default async function ProfileLiveriesPage() {
  const mockLiveries = [
    {
      id: '1',
      carId: 'gt3-r',
      carName: 'Porsche 911 GT3 R (992)',
      thumbnailUrl: '',
      uploadedAt: new globalThis.Date(),
      isValidated: true,
    },
    {
      id: '2',
      carId: 'f3',
      carName: 'Dallara F3',
      thumbnailUrl: '',
      uploadedAt: new globalThis.Date(),
      isValidated: false,
    }
  ];

  return (
    <Container size="lg" py={8}>
      <Stack direction="row" align="center" justify="between" mb={8}>
        <Box>
          <Heading level={1}>My Liveries</Heading>
          <Text color="text-gray-400" mt={1} block>Manage your custom car liveries</Text>
        </Box>
        <Link href={routes.protected.profileLiveryUpload}>
          <Button variant="primary">Upload livery</Button>
        </Link>
      </Stack>

      <Grid cols={3} gap={6}>
        {mockLiveries.map((livery) => (
          <LiveryCard key={livery.id} livery={livery} />
        ))}
      </Grid>

      <Box mt={12}>
        <Link href={routes.protected.profile}>
          <Button variant="secondary">Back to profile</Button>
        </Link>
      </Box>
    </Container>
  );
}
