Accounts — Card List

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { ObjectNumber } from "@/components/ui/object-number";

const ACCOUNTS = [
  { code: "ACME", name: "Acme Corporation", seats: 240, plan: "Enterprise", value: 18420.0, state: "positive" as const },
  { code: "GLOB", name: "Globex Industries", seats: 95, plan: "Business", value: 9280.0, state: "positive" as const },
  { code: "INIT", name: "Initech LLC", seats: 48, plan: "Business", value: 4400.0, state: "neutral" as const },
  { code: "UMBR", name: "Umbrella Group", seats: 310, plan: "Enterprise", value: 11395.0, state: "positive" as const },
];

export function HoldingsListBlock() {
  const total = ACCOUNTS.reduce((sum, a) => sum + a.value, 0);

  return (
    <section className="p-6">
      <Card className="mx-auto max-w-md">
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center justify-between text-base">
            Top accounts by MRR
            <Badge variant="secondary">This month</Badge>
          </CardTitle>
          <p className="text-sm text-muted-foreground">
            Monthly recurring revenue by customer account.
          </p>
        </CardHeader>
        <CardContent className="space-y-3">
          {ACCOUNTS.map((a) => (
            <div
              key={a.code}
              className="flex items-center gap-3 rounded-lg bg-muted/40 p-3"
            >
              <span className="flex size-9 shrink-0 items-center justify-center rounded-md bg-background text-xs font-semibold">
                {a.code}
              </span>
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium">{a.name}</p>
                <p className="text-xs text-muted-foreground">
                  {a.seats} seats · {a.plan}
                </p>
              </div>
              <ObjectNumber
                value={a.value}
                kind="currency"
                currency="USD"
                state={a.state}
                size="sm"
              />
            </div>
          ))}

          <Separator />

          <div className="flex items-center justify-between">
            <span className="text-sm text-muted-foreground">Total MRR</span>
            <ObjectNumber value={total} kind="currency" currency="USD" />
          </div>
        </CardContent>
      </Card>
    </section>
  );
}