"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import { useTranslations } from "next-intl";

export default function MediaSection({
  images,
  animalUsage,
  isGroup,
  isCamelOffer,
  onOpenLightbox,
}: {
  images: string[];
  animalUsage?: string;
  isGroup?: boolean;
  /** Use camel list copy when viewing a camel offer (same keys as horses). */
  isCamelOffer?: boolean;
  onOpenLightbox: (img: string) => void;
}) {
  const tSale = useTranslations(
    isCamelOffer ? "CAMELS_LIST" : "HORSES_LIST",
  );

  if (!images?.length) return null;

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="bg-white rounded-2xl overflow-hidden shadow-lg"
    >
      <div className="relative">
        <div className="relative w-full h-80">
          <Image
            src={images[0]}
            alt="main"
            fill
            priority
            sizes="(max-width: 1024px) 100vw, 66vw"
            className="object-cover"
          />
        </div>
        <div className="absolute top-3 right-3 flex gap-2">
          {animalUsage && (
            <span className="bg-[#1B7A50] text-white px-3 py-1 rounded-xl text-sm font-bold">
              {animalUsage}
            </span>
          )}
          <span className="bg-white text-[#1B7A50] border  px-3 py-1 rounded-xl text-sm font-bold">
            {isGroup ? tSale("sale_group") : tSale("sale_single")}
          </span>
        </div>
      </div>

      {images.length > 1 && (
        <div className="p-4 grid grid-cols-4 gap-3">
          {images.map((img, i) => (
            <button
              key={`${img}-${i}`}
              type="button"
              className="h-20 w-full rounded-lg border cursor-pointer overflow-hidden"
              onClick={() => onOpenLightbox(img)}
            >
              <div className="relative w-full h-20">
                <Image
                  src={img}
                  alt={`صورة ${i + 1}`}
                  fill
                  sizes="(max-width: 768px) 25vw, 200px"
                  className="object-cover"
                />
              </div>
            </button>
          ))}
        </div>
      )}
    </motion.div>
  );
}