// components/LogoutConfirmDialog.tsx
'use client';
import { LogOut, AlertCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import CustomResponsiveDialog from './dialog/CustomResponsiveDialog';

interface LogoutConfirmDialogProps {
	open: boolean;
	onOpenChange: (open: boolean) => void;
	onConfirm: () => void;
	isLoading?: boolean;
}

const LogoutConfirmDialog = ({
	open,
	onOpenChange,
	onConfirm,
	isLoading = false,
}: LogoutConfirmDialogProps) => {
	return (
		<CustomResponsiveDialog
			open={open}
			setOpen={onOpenChange}
			header={
				<div className="w-full space-y-2">
					<div className="flex items-center gap-3">
						<div className="p-2 rounded-full bg-[#CBB26A]/10">
							<LogOut className="h-5 w-5 text-[#CBB26A]" />
						</div>
						<h2 className="text-xl font-serif font-semibold text-white">
							Sign Out Confirmation
						</h2>
					</div>
					<div className="pl-11">
						<p className="text-sm text-[#B8B2A8]">
							Are you sure you want to sign out of your account?
						</p>
						<p className="mt-1 text-xs text-[#B8B2A8]/60 flex items-center gap-1.5">
							<AlertCircle className="h-3.5 w-3.5" />
							You'll need to sign in again to access the dashboard
						</p>
					</div>
				</div>
			}
			classNameContent="max-w-[420px] p-0 rounded-xl bg-linear-to-b from-[#1A1510] to-[#0F0B07] border border-[#2A2520] shadow-2xl"
			classNameBody="px-6 py-6"
			classNameCloseBtn="absolute top-4 right-4 text-[#B8B2A8]/50 hover:text-[#CBB26A] transition-colors"
		>
			<div className="flex flex-row gap-4">
				<Button
					onClick={onConfirm}
					disabled={isLoading}
					className="w-1/2 h-11 bg-linear-to-r from-[#CBB26A] to-[#A58D4F] hover:from-[#DBC282] hover:to-[#B59E57] text-[#0F0B07] font-medium rounded-lg shadow-lg shadow-[#CBB26A]/20 transition-all duration-300 hover:shadow-xl hover:shadow-[#CBB26A]/30 disabled:opacity-50"
				>
					{isLoading ? (
						<div className="flex items-center gap-2">
							<div className="w-4 h-4 border-2 border-[#0F0B07] border-t-transparent rounded-full animate-spin" />
							<span>Signing out...</span>
						</div>
					) : (
						<div className="flex items-center gap-2">
							<LogOut className="h-4 w-4" />
							<span>Yes, Sign Out</span>
						</div>
					)}
				</Button>

				<Button
					variant="outline"
					onClick={() => onOpenChange(false)}
					className="w-1/2 h-11 bg-transparent border border-[#2A2520] hover:bg-[#2A2520]/30 text-[#B8B2A8] hover:text-white rounded-lg transition-all duration-300"
				>
					Cancel
				</Button>
			</div>
		</CustomResponsiveDialog>
	);
};
export default LogoutConfirmDialog;