"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import Modal from "../elements/Modal";

interface MultiImageModalProps {
  isOpen: boolean;
  files: File[];
  onRemove: (index: number) => void;
  onCancel: () => void;
  onConfirm: () => void;
}

export default function MultiImageModal({
  isOpen,
  files,
  onRemove,
  onCancel,
  onConfirm,
}: MultiImageModalProps) {
  if (!isOpen || files.length === 0) return null;

  return (
    <Modal isOpen={isOpen} onClose={onCancel} height="min(85vh, 640px)">
      <div className="flex h-full flex-col p-3">
        <p className="mb-3 text-center text-sm font-semibold text-neutral-600 dark:text-neutral-300">
          {files.length} عکس انتخاب شده
        </p>
        <div className="grid flex-1 grid-cols-3 gap-2 overflow-y-auto">
          {files.map((file, i) => (
            <motion.div
              key={`${file.name}-${i}`}
              layout
              className="relative aspect-square overflow-hidden rounded-xl"
            >
              <Image
                src={URL.createObjectURL(file)}
                alt=""
                fill
                className="object-cover"
                unoptimized
              />
              <button
                type="button"
                onClick={() => onRemove(i)}
                className="absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-black/60 text-xs text-white"
              >
                ×
              </button>
            </motion.div>
          ))}
        </div>
        <div className="mt-4 flex justify-center gap-4">
          <button
            type="button"
            onClick={onConfirm}
            className="ig-dm-send-btn gentle-transition rounded-full px-8 py-2.5 text-sm font-semibold text-white active:scale-95"
          >
            ارسال همه
          </button>
          <button
            type="button"
            onClick={onCancel}
            className="gentle-transition rounded-full border border-neutral-300 px-6 py-2.5 text-sm active:scale-95 dark:border-neutral-600"
          >
            لغو
          </button>
        </div>
      </div>
    </Modal>
  );
}
