Manage Subscription

import {
  Badge,
  Banner,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Separator,
  UsageMeterLinear,
} from "@cooud-ui/ui";
import { CalendarClock, CreditCard } from "lucide-react";

interface MeterRow {
  id: string;
  label: string;
  value: number;
  max: number;
  unit?: string;
}

const subscriptionMeters: MeterRow[] = [
  { id: "manage-seats", label: "Seats", value: 18, max: 25 },
  { id: "manage-storage", label: "Storage", value: 164, max: 250, unit: "GB" },
  { id: "manage-api", label: "API calls", value: 842000, max: 1000000 },
];

export function ManageSubscriptionBlock() {
  return (
    <section aria-label="Manage subscription" className="mx-auto w-full max-w-2xl">
      <Card className="gap-0 overflow-hidden p-0 shadow-md">
        <Banner
          variant="info"
          align="start"
          dismissible={false}
          icon={<CalendarClock aria-hidden="true" />}
          title="Your plan renews on Jul 1, 2026"
          description="Manage anytime — changes take effect on your next invoice."
        />
        <CardHeader className="p-6">
          <CardTitle className="font-display text-lg">Pro plan</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">
            Billed monthly · workspace-wide access.
          </p>
          <div className="col-start-2 row-span-2 row-start-1 flex items-center gap-3 self-start justify-self-end">
            <Badge variant="success">Active</Badge>
            <span className="flex items-baseline gap-1">
              <span className="font-display text-2xl font-semibold text-fg">$290</span>
              <span className="text-sm text-fg-tertiary">/ mo</span>
            </span>
          </div>
        </CardHeader>
        <Separator />
        <CardContent className="flex flex-col gap-5 p-6">
          <h3 className="font-display text-sm font-semibold text-fg">Usage this period</h3>
          {subscriptionMeters.map(({ id, label, value, max, unit }) => (
            <UsageMeterLinear key={id} label={label} value={value} max={max} unit={unit} />
          ))}
        </CardContent>
        <Separator />
        <CardContent className="flex flex-wrap items-center justify-between gap-4 p-6">
          <div className="flex items-center gap-3">
            <span className="inline-flex size-10 items-center justify-center rounded-lg bg-surface-overlay text-fg-secondary">
              <CreditCard className="size-5" aria-hidden="true" />
            </span>
            <div className="flex flex-col">
              <span className="text-sm font-medium text-fg">Visa ending 4242</span>
              <span className="text-sm text-fg-tertiary">Expires 08 / 27</span>
            </div>
          </div>
          <Button variant="outline" size="sm">
            Update
          </Button>
        </CardContent>
        <Separator />
        <CardFooter className="justify-end gap-3 p-6">
          <Button variant="outline" size="sm">
            Change plan
          </Button>
          <Button variant="ghost" size="sm" className="text-error hover:text-error">
            Cancel subscription
          </Button>
        </CardFooter>
      </Card>
    </section>
  );
}