'use client';

import { useTranslations } from 'next-intl';
import { Mail, AlertTriangle, ShieldCheck } from 'lucide-react';

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';

interface EmailVerificationPromptProps {
    open: boolean;
    onVerify: () => void;
    onCancel: () => void;
}

export function EmailVerificationPrompt({ open, onVerify, onCancel }: EmailVerificationPromptProps) {
    const t = useTranslations();

    return (
        <Dialog open={open} onOpenChange={() => {}}>
            <DialogContent hideClose className="sm:max-w-lg border-0 shadow-2xl">
                {/* Icon Section */}
                <div className="flex flex-col items-center text-center py-6">
                    <div className="relative mb-4">
                        <div className="w-20 h-20 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center shadow-lg">
                            <Mail className="h-10 w-10 text-white" />
                        </div>
                        <div className="absolute -top-1 -right-1 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center">
                            <AlertTriangle className="h-4 w-4 text-white" />
                        </div>
                    </div>
                    
                    <DialogHeader className="px-6 text-center">
                        <DialogTitle className="text-2xl font-bold text-gray-900 mb-3">
                            {t('custom.verify-email-now')}
                        </DialogTitle>
                        <DialogDescription className="text-gray-600 text-base leading-relaxed max-w-md">
                            {t('custom.email-not-verified')}
                        </DialogDescription>
                    </DialogHeader>
                </div>

               

                {/* Action Buttons */}
                <DialogFooter className="gap-3 sm:gap-3 px-6 pb-6">
                    {/* <Button
                        type="button"
                        variant="outline"
                        onClick={onCancel}
                        className="w-full sm:w-auto border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
                    >
                        {t('custom.cancel')}
                    </Button> */}
                    <Button
                        type="button"
                        onClick={onVerify}
                        className="w-full sm:w-auto bg-gradient-to-r from-primary-tw-400 to-primary-tw-500 text-white hover:from-primary-tw-500 hover:to-primary-tw-600 transition-all shadow-lg"
                    >
                        <Mail className="h-4 w-4 ml-2" />
                        {t('custom.ok')}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}