import Image from "next/image";

interface WorkCardProps {
  title: string;
  description: string;
  image: string;
  imageAlt?: string;
}

export default function WorkCard({
  title,
  description,
  image,
  imageAlt,
}: WorkCardProps) {
  return (
    <div className="flex flex-col items-center relative">

      <div className="h-[400px] w-full overflow-hidden rounded-2xl border border-[#e9e9e9] shadow-[8px_13px_16px_rgba(147,147,147,0.1)] relative">
        <Image
          src={image}
          alt={imageAlt || title}
          fill
          className="object-cover"
          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
        />
      </div>

      <div className="relative -mt-[68px] w-[92%] rounded-2xl border border-[#ebf1fb] bg-white p-6 shadow-[8px_13px_16px_rgba(147,147,147,0.1)] z-10">
        <div className="flex flex-col gap-3 items-center">
          <h3 className="font-bold text-xl leading-[1.4] text-[#202020] text-center">
            {title}
          </h3>
          <p className="font-normal text-base leading-normal text-[#646464] text-center">
            {description}
          </p>
        </div>
      </div>
    </div>
  );
}