Simple toggles

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Label,
  Separator,
  Switch,
} from "@cronus-ui/ui";

interface PreferenceToggle {
  id: string;
  label: string;
  description: string;
  enabled: boolean;
}

interface PreferenceSection {
  id: string;
  label: string;
  toggles: PreferenceToggle[];
}

const preferenceSections: PreferenceSection[] = [
  {
    id: "section-activity",
    label: "Activity",
    toggles: [
      {
        id: "pref-sales",
        label: "Sales & payouts",
        description: "Order confirmations, payout receipts, and refunds.",
        enabled: true,
      },
      {
        id: "pref-reviews",
        label: "Product reviews",
        description: "When a customer leaves a rating or review.",
        enabled: true,
      },
      {
        id: "pref-comments",
        label: "Comments & mentions",
        description: "Replies to your posts and @mentions.",
        enabled: false,
      },
    ],
  },
  {
    id: "section-digest",
    label: "Digest & marketing",
    toggles: [
      {
        id: "pref-weekly",
        label: "Weekly summary",
        description: "Your store performance, every Monday morning.",
        enabled: true,
      },
      {
        id: "pref-product-news",
        label: "Product updates",
        description: "New Cronus features and improvements.",
        enabled: true,
      },
      {
        id: "pref-offers",
        label: "Tips & offers",
        description: "Occasional guides and promotional offers.",
        enabled: false,
      },
    ],
  },
];

export function NotificationPreferencesSimpleBlock() {
  return (
    <Card className="mx-auto w-full max-w-xl gap-0 pb-0 shadow-md">
      <CardHeader>
        <CardTitle className="font-display text-lg">Email notifications</CardTitle>
        <CardDescription>Decide what lands in your inbox.</CardDescription>
      </CardHeader>
      <CardContent className="px-0 pt-4">
        {preferenceSections.map((section) => (
          <div key={section.id}>
            <div className="border-t border-border bg-surface-inset px-4 py-2 sm:px-6">
              <span className="text-xs font-medium uppercase tracking-wide text-fg-tertiary">
                {section.label}
              </span>
            </div>
            {section.toggles.map((toggle) => (
              <div
                key={toggle.id}
                className="flex items-center gap-4 border-t border-border px-4 py-4 sm:px-6"
              >
                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                  <Label htmlFor={toggle.id}>{toggle.label}</Label>
                  <span className="text-xs text-fg-tertiary">{toggle.description}</span>
                </div>
                <Switch id={toggle.id} defaultChecked={toggle.enabled} />
              </div>
            ))}
          </div>
        ))}
      </CardContent>
      <Separator />
      <CardFooter className="py-5">
        <span className="text-xs text-fg-tertiary">
          Every email includes a one-click unsubscribe link.
        </span>
      </CardFooter>
    </Card>
  );
}