Settings Panel

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Input,
  Label,
  Separator,
  Switch,
} from "@cooud-ui/ui";
import { useState } from "react";

interface Preference {
  id: string;
  label: string;
  description: string;
}

const preferences: Preference[] = [
  {
    id: "pref-product",
    label: "Product updates",
    description: "News about features and improvements.",
  },
  {
    id: "pref-security",
    label: "Security alerts",
    description: "Get notified about new sign-ins and suspicious activity.",
  },
  {
    id: "pref-digest",
    label: "Weekly digest",
    description: "A summary of your workspace activity, every Monday.",
  },
];

export function SettingsBlock() {
  const [enabled, setEnabled] = useState<Record<string, boolean>>({
    "pref-product": true,
    "pref-security": true,
    "pref-digest": false,
  });

  function toggle(id: string) {
    setEnabled((prev) => ({ ...prev, [id]: !prev[id] }));
  }

  return (
    <Card className="mx-auto w-full max-w-xl shadow-md">
      <CardHeader>
        <CardTitle className="font-display text-lg">Account settings</CardTitle>
        <p className="text-sm text-fg-secondary">
          Manage your profile and notification preferences.
        </p>
      </CardHeader>

      <CardContent className="flex flex-col gap-6">
        {/* Profile */}
        <section className="flex flex-col gap-4">
          <h3 className="text-xs font-semibold uppercase tracking-wider text-fg-tertiary">
            Profile
          </h3>
          <div className="flex items-center gap-4">
            <Avatar className="size-14">
              <AvatarImage src="https://i.pravatar.cc/96?img=12" alt="Mara Castillo" />
              <AvatarFallback>MC</AvatarFallback>
            </Avatar>
            <Button variant="outline" size="sm">
              Change photo
            </Button>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="flex flex-col gap-2">
              <Label htmlFor="settings-name">Full name</Label>
              <Input id="settings-name" defaultValue="Mara Castillo" />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="settings-email">Email</Label>
              <Input id="settings-email" type="email" defaultValue="mara@cooud.io" />
            </div>
          </div>
        </section>

        <Separator />

        {/* Preferences */}
        <section className="flex flex-col gap-4">
          <h3 className="text-xs font-semibold uppercase tracking-wider text-fg-tertiary">
            Preferences
          </h3>
          <div className="flex flex-col gap-4">
            {preferences.map(({ id, label, description }) => (
              <div key={id} className="flex items-start justify-between gap-4">
                <div className="flex flex-col gap-0.5">
                  <Label htmlFor={id}>{label}</Label>
                  <p className="text-sm text-fg-secondary">{description}</p>
                </div>
                <Switch
                  id={id}
                  checked={enabled[id]}
                  onCheckedChange={() => toggle(id)}
                  aria-label={label}
                />
              </div>
            ))}
          </div>
        </section>
      </CardContent>

      <Separator />

      <CardFooter className="justify-end gap-3">
        <Button variant="outline">Cancel</Button>
        <Button variant="gradient">Save changes</Button>
      </CardFooter>
    </Card>
  );
}