// Tenant entitlements — placeholder. Lists the metered allowances
// (AI tokens, storage GB, etc.) granted to the active tenant and how
// much of each has been consumed. Data source not wired yet.

import { Gauge } from "lucide-react"
import { AppShell } from "~/components/layout/app-shell"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card"

export default function EntitlementsRoute() {
  return (
    <AppShell>
      <div className="flex items-center gap-3">
        <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
          <Gauge className="size-5" />
        </div>
        <div>
          <h1 className="text-2xl font-semibold">Entitlements</h1>
          <p className="text-sm text-muted-foreground">
            Metered allowances for this tenant — included units and usage to
            date per meter.
          </p>
        </div>
      </div>
      <Card>
        <CardHeader>
          <CardTitle>Coming soon</CardTitle>
          <CardDescription>
            Personal-cloud entitlements are tracked per account today. A
            tenant-rollup endpoint is pending.
          </CardDescription>
        </CardHeader>
        <CardContent />
      </Card>
    </AppShell>
  )
}