import {
  Card,
  CardContent,
  CardHeader,
  CardTitle
} from "@/components/ui/Card";
import Image from "next/image";

interface CustomCardProps {
  title: string;
  description: string;
  imageSrc: string;
  imageAlt: string;
}

export function CustomCard({ title, description, imageSrc, imageAlt }: CustomCardProps) {
  return (
    <Card className="flex flex-col h-[492px] rounded-none shadow-none border-none bg-[#FAFAFA] overflow-hidden group">
      <div className="w-full h-[269px] relative bg-white overflow-hidden">
        <Image 
          src={imageSrc}
          alt={imageAlt}
          fill
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 33vw, 405px"
          className="object-cover transition-transform duration-300 group-hover:scale-105"
          priority
        />
      </div>
      <div className="flex flex-col flex-grow p-6">
        <CardHeader className="p-0 mb-4">
          <CardTitle className="text-[28px] leading-[36px] font-allenoire transition-colors duration-300 group-hover:text-primary">{title}</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          <p className="text-[16px] leading-[26px] line-clamp-4 font-poppins">{description}</p>
        </CardContent>
      </div>
    </Card>
  );
}