'use client';

import React from 'react';
import { Grid } from '@/ui/Grid';
import { LiveryCard } from '@/components/drivers/LiveryCard';
import { ProfileSection } from './ProfileSection';
import { ProfileLiveryViewData } from '@/lib/view-data/ProfileLiveriesViewData';

interface LiveryGalleryProps {
  liveries: ProfileLiveryViewData[];
  action?: React.ReactNode;
}

export function LiveryGallery({ liveries, action }: LiveryGalleryProps) {
  return (
    <ProfileSection 
      title="My Liveries" 
      description="Manage your custom car liveries and designs."
      action={action}
    >
      <Grid cols={3} gap={6}>
        {liveries.map((livery) => (
          <LiveryCard key={livery.id} livery={livery} />
        ))}
      </Grid>
    </ProfileSection>
  );
}