import Image from "next/image";

export const ComboContentCart = ({ images }: { images: string[] }) => {
  return (
    <div className="w-[280px] h-[300px]  rounded-2xl">
      <div className="w-[280px] h-[220px] rounded-t-2xl overflow-hidden relative">
        <Image
          src={images[0]}
          alt=""
          fill
          style={{ objectFit: "cover" }}
          className="rounded-t-2xl"
        />
      </div>

      {/* Bottom Images */}
      <div className="rounded-b-2xl overflow-hidden grid grid-cols-3">
        <div className="relative w-full h-[80px] overflow-hidden">
          <Image
            src={images[1]}
            alt=""
            fill
            style={{ objectFit: "cover" }}
            className="rounded-bl-2xl"
          />
        </div>
        <div className="relative w-full h-[80px] overflow-hidden">
          <Image src={images[2]} alt="" fill style={{ objectFit: "cover" }} />
        </div>
        <div className="relative w-full h-[80px] overflow-hidden">
          <Image
            src={images[3]}
            alt=""
            fill
            style={{ objectFit: "cover" }}
            className="rounded-br-2xl"
          />
        </div>
      </div>
    </div>
  );
};