import { useTranslation } from 'react-i18next';
import { X, AlertTriangle } from 'lucide-react';

interface ConfirmModalProps {
  title: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
  onConfirm: () => void;
  onCancel: () => void;
  variant?: 'danger' | 'warning' | 'info';
}

export default function ConfirmModal({
  title,
  message,
  confirmText,
  cancelText,
  onConfirm,
  onCancel,
  variant = 'danger',
}: ConfirmModalProps) {
  const { t } = useTranslation();
  const defaultConfirmText = confirmText || t('common.confirm');
  const defaultCancelText = cancelText || t('common.cancel');
  const getVariantStyles = () => {
    switch (variant) {
      case 'danger':
        return {
          icon: 'btn-danger',
          confirmButton: 'btn-danger hover:shadow-lg',
        };
      case 'warning':
        return {
          icon: 'bg-yellow-100 text-yellow-600',
          confirmButton: 'bg-gradient-to-r from-yellow-500 to-yellow-600 hover:shadow-lg',
        };
      case 'info':
        return {
          icon: 'btn-primary',
          confirmButton: 'btn-primary hover:shadow-lg',
        };
    }
  };

  const styles = getVariantStyles();

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-4">
      <div className="glass-effect rounded-3xl shadow-2xl max-w-md w-full overflow-hidden animate-scale-in">
        <div className="p-6">
          <div className="flex items-start gap-4">
            <div className={`p-3 rounded-2xl ${styles.icon} text-white`}>
              <AlertTriangle className="w-6 h-6" />
            </div>
            <div className="flex-1">
              <h3 className="text-xl font-bold text-gray-900 mb-2">{title}</h3>
              <p className="text-gray-600">{message}</p>
            </div>
            <button
              onClick={onCancel}
              className="p-2 hover:bg-gray-100 rounded-xl transition-all"
            >
              <X className="w-5 h-5 text-gray-500" />
            </button>
          </div>
        </div>

        <div className="px-6 pb-6 flex gap-3">
          <button
            onClick={onCancel}
            className="flex-1 px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-2xl transition-all font-semibold"
          >
            {defaultCancelText}
          </button>
          <button
            onClick={onConfirm}
            className={`flex-1 px-6 py-3 text-white rounded-2xl transition-all font-semibold ${styles.confirmButton}`}
          >
            {defaultConfirmText}
          </button>
        </div>
      </div>
    </div>
  );
}