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

export function EventCardView({ eventInfo, actionFooter }: { eventInfo: EventInfo; actionFooter: React.ReactNode }) {
  const { type, coverImage, eventName, description, startTime, endTime } = eventInfo;
  const startDayJs = dayjs(startTime);
  const endDayJs = dayjs(endTime);
  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" />
      <img
        src={coverImage}
        alt="Event cover"
        className="relative z-20 aspect-video w-full object-cover rounded-t-xl"
      />
      <Skeleton
        className="absolute z-15 aspect-video w-full object-cover rounded-t-xl"
      />
      <CardHeader>
        <CardAction>
          {type === 'official' ? <Badge variant="secondary">Official</Badge> : <Badge variant="destructive">Party</Badge>}
        </CardAction>
        <CardTitle>{eventName}</CardTitle>
        <CardDescription className="flex flex-row items-center text-xs">
          <Calendar className="size-4 mr-2" />
          {`${startDayJs.format('YYYY/MM/DD')} - ${endDayJs.format('YYYY/MM/DD')}`}
        </CardDescription>
        <CardDescription className="mt-1">
          {description}
        </CardDescription>
      </CardHeader>
      <CardFooter>
        {actionFooter}
      </CardFooter>
    </Card>
  );
}