'use client';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { AlertTriangle } from 'lucide-react';
import { AlertModalProps } from '@/types/common';
import { BiSolidInfoSquare } from "react-icons/bi";

export const AlertModal = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  description,
  loading = false,
  actionLabel = 'Confirm',
  cancelLabel = 'Cancel',
  variant = 'destructive',
  children,
}: AlertModalProps) => {
  const handleConfirm = () => {
    if (loading) return;
    onConfirm?.();
  };

  const handleClose = () => {
    if (loading) return;
    onClose?.();
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className='bg-neutral-900 border-neutral-700 text-white sm:max-w-md max-w-[95vw] rounded-lg'>
        <DialogHeader>
          <DialogTitle
            className={`flex items-center gap-2 justify-center sm:justify-start ${
              variant === 'destructive' ? 'text-red-500' : 'text-yellow-500'
            }`}
          >
            {variant === 'destructive' ? <AlertTriangle className='h-5 w-5' /> : <BiSolidInfoSquare className='h-5 w-5' />}
            {title}
          </DialogTitle>
          <DialogDescription className='text-neutral-300'>{description}</DialogDescription>
        </DialogHeader>
        {children}
        {variant !== 'info' && (
          <DialogFooter className='flex pt-4 gap-2'>
            <Button
              variant='light'
              onClick={handleClose}
              disabled={loading}
              className='hover:bg-neutral-800 hover:text-white'
            >
              {cancelLabel}
            </Button>
            <Button
              variant='destructive'
              onClick={handleConfirm}
              disabled={loading}
              className='bg-red-600 hover:bg-red-700'
            >
              {loading ? 'Please wait...' : actionLabel}
            </Button>
          </DialogFooter>
        )}
      </DialogContent>
    </Dialog>
  );
};
