import { AdminAccount } from '@/app/generated/prisma/client';
import PrimaryButton from '@/components/button/PrimaryButton';
import CustomResponsiveDialog from '@/components/dialog/CustomResponsiveDialog';

interface Props {
	admin: AdminAccount;
	isOpen: boolean;
	setIsOpen: (v: boolean) => void;
	onDelete: () => Promise<void>;
}

export const DeleteAdminDialog = ({
	admin,
	isOpen,
	setIsOpen,
	onDelete,
}: Props) => {
	return (
		<CustomResponsiveDialog
			open={isOpen}
			setOpen={setIsOpen} // ensures modal can be closed via X or backdrop click
			header={
				<h2 className="text-2xl font-bold bg-linear-to-r from-red-600 to-red-400 bg-clip-text text-transparent">
					Delete Admin
				</h2>
			}
			classNameContent="m-0 p-0 max-w-md rounded-2xl bg-background border-none overflow-y-auto"
			classNameBody="px-8 py-6"
			classNameCloseBtn="absolute top-4 right-4 text-foreground/40 hover:text-red-500 transition-all duration-300 cursor-pointer"
		>
			<div className="space-y-4">
				<p className="text-foreground/80">
					Are you sure you want to delete{' '}
					<span className="font-semibold">{admin.fullName}</span>?
				</p>
				<div className="flex justify-end gap-4 mt-4">
					<PrimaryButton
						title="Cancel"
						variant="secondary"
						onClick={() => setIsOpen(false)}
						className="w-1/3"
					/>
					<PrimaryButton
						title="Delete"
						variant="destructive"
						className="w-1/3"
						onClick={async () => {
							await onDelete();
							setIsOpen(false);
						}}
					/>
				</div>
			</div>
		</CustomResponsiveDialog>
	);
};