"use client";

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { AlertCircle } from "lucide-react";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";

interface ImageUploadGuidelinesModalProps {
  isOpen: boolean;
  onConfirm: () => void;
  onCancel: () => void;
  title?: string;
}

export default function ImageUploadGuidelinesModal({
  isOpen,
  onConfirm,
  onCancel,
  title,
}: ImageUploadGuidelinesModalProps) {
  const { language } = useLanguage();
  const t = getTranslation(language).imageUploadGuidelines;

  const guidelines = [
    t.guideline1,
    t.guideline2,
    t.guideline3,
    t.guideline4,
    t.guideline5,
  ];

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
      <DialogContent className="w-full max-w-md mx-auto sm:rounded-2xl">
        <DialogHeader>
          <div className="flex items-center gap-3">
            <AlertCircle className="w-6 h-6 text-[#FAA631]" />
            <DialogTitle className="text-xl font-bold text-gray-900">
              {title || t.title}
            </DialogTitle>
          </div>
        </DialogHeader>

        <div className="space-y-4 py-4">
          {guidelines.map((guideline, index) => (
            <div key={index} className="flex gap-3">
              <span className="text-[#FAA631] font-bold text-lg shrink-0">•</span>
              <p className="text-gray-700 text-sm leading-relaxed">{guideline}</p>
            </div>
          ))}
        </div>

        <div className="flex gap-3 pt-4 border-t border-gray-200">
          <Button
            onClick={onCancel}
            variant="outline"
            className="flex-1 h-12 text-base font-semibold border-2 border-gray-300 text-gray-700 hover:text-orange-400 hover:bg-gray-50"
          >
            {t.cancel}
          </Button>
          <Button
            onClick={onConfirm}
            className="flex-1 h-12 text-base font-semibold bg-[#FAA631] hover:bg-orange-500 text-white"
          >
            {t.ok}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}