import { AlertTriangle, Trash2 } from 'lucide-react';

export default function DangerZoneSection({
    onDelete,
}: {
    onDelete: () => void;
}) {
    return (
        <div
            id="danger"
            data-profile-section
            className="scroll-mt-24 overflow-hidden rounded-2xl border border-red-200 shadow-sm dark:border-red-700/30"
        >
            <div className="flex items-center gap-2.5 border-b border-red-200 bg-red-50 px-5 py-3.5 dark:border-red-700/30 dark:bg-red-900/10">
                <AlertTriangle className="h-4 w-4 text-red-500" />
                <h2 className="flex-1 text-sm font-semibold text-red-700 dark:text-red-400">
                    Danger zone
                </h2>
            </div>
            <div className="p-5">
                <div className="flex items-center justify-between gap-4">
                    <div>
                        <p className="text-foreground text-sm font-medium">
                            Delete account
                        </p>
                        <p className="text-muted-foreground text-xs">
                            Permanently remove your account and all associated
                            data.
                        </p>
                    </div>
                    <button
                        type="button"
                        onClick={onDelete}
                        className="flex shrink-0 items-center gap-2 rounded-xl bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700"
                    >
                        <Trash2 className="h-3.5 w-3.5" />
                        Delete account
                    </button>
                </div>
            </div>
        </div>
    );
}