"use client";

/**
 * Success Dialog Component
 *
 * Generic success confirmation modal with checkmark icon.
 * Used to show success messages after operations complete.
 */

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { CheckCircle2 } from 'lucide-react';

interface SuccessDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title?: string;
  message: string;
  onClose?: () => void;
}

export function SuccessDialog({
  open,
  onOpenChange,
  title,
  message,
  onClose,
}: SuccessDialogProps) {
  const hasVisibleTitle = Boolean(title?.trim());
  const accessibleTitle = title?.trim() || message;

  const handleClose = () => {
    onOpenChange(false);
    onClose?.();
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent layout="compact" className="sm:max-w-md">
        <DialogHeader className="items-center text-center">
          <div className="mb-4 flex justify-center">
            <CheckCircle2 className="h-16 w-16 text-green-500" />
          </div>
          <DialogTitle className={hasVisibleTitle ? undefined : "sr-only"}>
            {accessibleTitle}
          </DialogTitle>
          <DialogDescription className="text-center text-base">
            {message}
          </DialogDescription>
        </DialogHeader>
        <div className="flex justify-center mt-4">
          <Button onClick={handleClose} className="min-w-[120px]">
            حسناً
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}