import Link from 'next/link';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
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';

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

  return (
    <Container size="lg" py={8}>
      <div className="flex items-center justify-between mb-8">
        <div>
          <Heading level={1}>My Liveries</Heading>
          <p className="text-gray-400 mt-1">Manage your custom car liveries</p>
        </div>
        <Link href={routes.protected.profileLiveryUpload}>
          <Button variant="primary">Upload livery</Button>
        </Link>
      </div>

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

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