Account card

"use client";
import { CalendarDays, CircleAlert, CreditCard, Mail, Plug, RefreshCw } from "lucide-react";
import { AccountCard } from "@/components/ui/notchset/blocks/account-card";
import { Button } from "@/components/ui/notchset/button";
import { StatusPill } from "@/components/ui/notchset/status-pill";

export default function AccountCardDemo() {
  return (
    <div className="flex w-full max-w-[640px] flex-col gap-3">
      <AccountCard
        icon={<Mail />}
        title="Email"
        badge={<StatusPill tone="ok">Connected</StatusPill>}
        detail="ana@larkspur.com · synced 2 min ago"
        actions={
          <>
            <Button size="sm">
              <RefreshCw />
              Sync now
            </Button>
            <Button size="sm" variant="ghost">
              Disconnect
            </Button>
          </>
        }
      />
      <AccountCard
        on={false}
        icon={<CalendarDays />}
        title="Calendar"
        detail="Meetings with people in your CRM land on the calendar and the company timeline."
        actions={
          <Button size="sm">
            <Plug />
            Connect a calendar
          </Button>
        }
      />
      <AccountCard
        icon={<CreditCard />}
        title="Card ending 4242"
        badge={
          <StatusPill tone="bad">
            <CircleAlert />
            Declined Oct 1
          </StatusPill>
        }
        detail="Expires 08/28 · Ana Ruiz"
        actions={
          <Button size="sm" variant="primary">
            Replace card
          </Button>
        }
      />
    </div>
  );
}