import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import Image from "next/image";
import { CheckCircle } from "lucide-react";

export function DialogDetailGaleri({ open, onClose, data }: any) {
  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-3xl rounded-2xl p-0 overflow-hidden">
        {/* Header */}
        <div className="bg-[#1F6779] text-white px-6 py-4">
          <DialogTitle className="text-white">Detail Galeri</DialogTitle>
        </div>

        <div className="px-6 py-6 space-y-6">
          {/* Images */}
          <div className="grid grid-cols-3 gap-4">
            <div className="relative h-28 w-full">
              <Image
                src={data.image_url}
                alt="Galery Image"
                fill
                className="object-cover rounded-lg"
              />
            </div>
          </div>

          {/* Title */}
          <h2 className="text-2xl font-semibold text-[#1F6779]">
            {data.title}
          </h2>

          {/* Deskripsi */}
          <div>
            <p className="font-medium text-sm text-gray-700">Deskripsi</p>
            <p className="text-gray-600">{data.desc}</p>
          </div>

          {/* Tanggal Upload */}
          <div>
            <p className="font-medium text-sm text-gray-700">Tanggal Upload</p>
            <p className="text-gray-600">
              {new Date(data.created_at).toLocaleDateString("id-ID")}
            </p>
          </div>

          {/* Timeline */}
          <div>
            <p className="font-medium text-sm text-gray-700 mb-2">
              Status Timeline
            </p>

            <div className="flex flex-col gap-3">
              <div className="flex items-start gap-3">
                <CheckCircle className="text-green-600" />
                <div>
                  <p className="font-semibold">Upload Berhasil</p>
                  <p className="text-gray-500 text-sm">
                    {new Date(data.created_at).toLocaleString("id-ID")}
                  </p>
                </div>
              </div>

              {data.approved_at && (
                <div className="flex items-start gap-3">
                  <CheckCircle className="text-green-600" />
                  <div>
                    <p className="font-semibold">Disetujui oleh Approver</p>
                    <p className="text-gray-500 text-sm">
                      {new Date(data.approved_at).toLocaleString("id-ID")}
                    </p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Footer */}
        <DialogFooter className="px-6 pb-6">
          <button
            onClick={onClose}
            className="bg-gray-300 text-gray-700 px-6 py-2 rounded-lg"
          >
            Tutup
          </button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}