Settings 5

import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import {
	SettingsGroup,
	SettingsGroupTitle,
	SettingsPanel,
} from "@/components/settings-section";

export function DangerZoneSettings() {
	return (
		<SettingsGroup>
			<SettingsGroupTitle>
				<IconPlaceholder
					aria-hidden
					hugeicons="Alert02Icon"
					lucide="TriangleAlertIcon"
					phosphor="WarningIcon"
					remixicon="RiErrorWarningLine"
					tabler="IconAlertTriangle"
				/>
				Danger zone
			</SettingsGroupTitle>
			<SettingsPanel className="flex flex-col gap-6 pb-(--card-spacing)">
				<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
					<div className="flex min-w-0 flex-col gap-1">
						<span className="font-medium text-sm">Sign out everywhere</span>
						<p className="text-pretty text-muted-foreground text-xs">
							End every signed-in session except this one.
						</p>
					</div>
					<Button
						className="shrink-0"
						id="sign-out-sessions"
						size="sm"
						type="button"
						variant="outline"
					>
						Sign out all
					</Button>
				</div>
				<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
					<div className="flex min-w-0 flex-col gap-1">
						<span className="font-medium text-sm">Delete account</span>
						<p className="text-pretty text-muted-foreground text-xs">
							Remove your account and all data. This cannot be undone.
						</p>
					</div>
					<AlertDialog>
						<AlertDialogTrigger asChild>
							<Button
								className="shrink-0"
								id="delete-account"
								size="sm"
								type="button"
								variant="destructive"
							>
								Delete account
							</Button>
						</AlertDialogTrigger>
						<AlertDialogContent size="sm">
							<AlertDialogHeader>
								<AlertDialogTitle>Delete your account?</AlertDialogTitle>
								<AlertDialogDescription>
									This permanently removes your profile, workspace access, and
									saved preferences. This action cannot be undone.
								</AlertDialogDescription>
							</AlertDialogHeader>
							<AlertDialogFooter>
								<AlertDialogCancel>Cancel</AlertDialogCancel>
								<AlertDialogAction variant="destructive">
									Delete account
								</AlertDialogAction>
							</AlertDialogFooter>
						</AlertDialogContent>
					</AlertDialog>
				</div>
			</SettingsPanel>
		</SettingsGroup>
	);
}