// Tenant subscription + billing — placeholder. Real surface lists the
// active plan, renewal date, invoices, and payment method for the
// active tenant. Data source not wired yet.

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

export default function PlanRoute() {
  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">
          <CreditCard className="size-5" />
        </div>
        <div>
          <h1 className="text-2xl font-semibold">Plan</h1>
          <p className="text-sm text-muted-foreground">
            Your tenant's subscription, billing details, and invoice history.
          </p>
        </div>
      </div>
      <Card>
        <CardHeader>
          <CardTitle>Coming soon</CardTitle>
          <CardDescription>
            Billing is not yet wired to a payment provider on this deployment.
          </CardDescription>
        </CardHeader>
        <CardContent />
      </Card>
    </AppShell>
  )
}