'use client';
import type { Photo } from '@/lib/data';
import Image from 'next/image';
import { Card, CardContent } from './ui/card';
import { CalendarDays } from 'lucide-react';
import { format } from 'date-fns';
import { es } from 'date-fns/locale';
import { cn } from '@/lib/utils';

interface PhotoCardProps {
  photo: Photo;
  onPhotoSelect: (photo: Photo) => void;
  className?: string;
}

export default function PhotoCard({ photo, onPhotoSelect, className }: PhotoCardProps) {
  const formattedDate = format(new Date(photo.date), "MMMM 'de' yyyy", {
    locale: es,
  });
  const capitalizedDate =
    formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1);

  return (
    <Card
      className={cn(
        "overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 group animate-in fade-in zoom-in-95 duration-500 cursor-pointer h-full w-full",
        className
      )}
      onClick={() => onPhotoSelect(photo)}
    >
      <CardContent className="p-0 relative h-full w-full">
        <Image
          src={photo.src}
          alt={photo.alt}
          fill
          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
          data-ai-hint={photo.dataAiHint}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
          <div className="text-white transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
            <div className="flex items-center">
              <CalendarDays className="w-4 h-4 mr-1.5 text-accent" />
              <p className="font-body text-xs text-accent-foreground bg-accent/80 px-2 py-1 rounded-full">
                {capitalizedDate}
              </p>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}