import { Calendar } from 'lucide-react';
import {
  Card,
  CardAction,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '../ui/badge';
import { Skeleton } from '../ui/skeleton';

export function EventCardSkeleton() {
  return (
    <Card className="relative mx-auto w-full max-w-sm pt-0">
      <div className="absolute inset-0 z-30 aspect-video bg-black/10" />
      <Skeleton
        className="relative z-20 aspect-video w-full object-cover rounded-t-xl"
      />
      <CardHeader>
        <CardAction>
          <Badge variant="secondary" className="bg-accent animate-pulse text-accent select-none">Official</Badge>
        </CardAction>
        <CardTitle>
          <Skeleton className="h-4 max-w-48" />
        </CardTitle>
        <CardDescription className="flex flex-row items-center text-xs">
          <Calendar className="size-4 mr-2" />
          <Skeleton className="h-4 w-24" />
        </CardDescription>
        <CardDescription className="mt-1">
          <Skeleton className="h-5 max-w-64" />
        </CardDescription>
      </CardHeader>
      <CardFooter>
        <Skeleton className="h-9 px-4 py-2 w-full"></Skeleton>
      </CardFooter>
    </Card>
  );
}