Password & danger zone

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Input,
  Label,
  Progress,
} from "@cronus-ui/ui";
import { MailCheck, Trash2 } from "lucide-react";

export function AccountSecurityPasswordBlock() {
  return (
    <section
      aria-label="Password and account security"
      className="mx-auto flex w-full max-w-2xl flex-col gap-6"
    >
      <Card className="shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Change password</CardTitle>
          <CardDescription>
            Choose a strong password you haven&apos;t used anywhere else.
          </CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-4">
          <div className="flex flex-col gap-2">
            <Label htmlFor="security-current-password">Current password</Label>
            <Input
              id="security-current-password"
              type="password"
              placeholder="••••••••"
              autoComplete="current-password"
            />
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="security-new-password">New password</Label>
            <Input
              id="security-new-password"
              type="password"
              placeholder="••••••••••••"
              autoComplete="new-password"
            />
            <Progress value={80} aria-label="Password strength: strong" />
            <div className="flex items-center justify-between text-xs">
              <span className="text-fg-tertiary">Use 12+ characters with numbers and symbols.</span>
              <span className="font-medium text-success-strong">Strong</span>
            </div>
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="security-confirm-password">Confirm new password</Label>
            <Input
              id="security-confirm-password"
              type="password"
              placeholder="••••••••••••"
              autoComplete="new-password"
            />
          </div>
        </CardContent>
        <CardFooter className="justify-end gap-3">
          <Button variant="ghost">Cancel</Button>
          <Button variant="primary">Update password</Button>
        </CardFooter>
      </Card>

      <Card className="shadow-md">
        <CardContent className="flex flex-wrap items-center gap-4">
          <span className="inline-flex size-11 shrink-0 items-center justify-center rounded-xl bg-surface-inset text-fg-secondary">
            <MailCheck className="size-5" aria-hidden="true" />
          </span>
          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
            <div className="flex flex-wrap items-center gap-2">
              <span className="font-medium text-fg">Recovery email</span>
              <Badge variant="success">Verified</Badge>
            </div>
            <p className="truncate text-sm text-fg-secondary">m.castillo@fastmail.com</p>
          </div>
          <Button variant="outline" size="sm">
            Change
          </Button>
        </CardContent>
      </Card>

      <Card className="border-error/30 shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg text-error-strong">Danger zone</CardTitle>
          <CardDescription>These actions are permanent and cannot be undone.</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-wrap items-center gap-4">
          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
            <span className="font-medium text-fg">Delete this account</span>
            <p className="text-sm text-fg-secondary">
              Removes your workspace, products, and billing history for good.
            </p>
          </div>
          <Button variant="destructive">
            <Trash2 className="size-4" aria-hidden="true" />
            Delete account
          </Button>
        </CardContent>
      </Card>
    </section>
  );
}