Subscriptions table with plan badges and billing info

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "settings") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

const subscriptions = [
  { service: "Vercel Pro", plan: "Pro", planVariant: "default" as const, billing: "$20/mo", nextBilling: "Mar 1, 2025", status: "Active", statusVariant: "success-light" as const },
  { service: "GitHub Enterprise", plan: "Enterprise", planVariant: "info" as const, billing: "$21/user/mo", nextBilling: "Mar 15, 2025", status: "Active", statusVariant: "success-light" as const },
  { service: "Figma Organization", plan: "Organization", planVariant: "warning-light" as const, billing: "$45/editor/mo", nextBilling: "Apr 1, 2025", status: "Active", statusVariant: "success-light" as const },
  { service: "Slack Business+", plan: "Business+", planVariant: "secondary" as const, billing: "$12.50/user/mo", nextBilling: "—", status: "Cancelled", statusVariant: "destructive-light" as const },
  { service: "Linear Standard", plan: "Standard", planVariant: "outline" as const, billing: "$8/user/mo", nextBilling: "Mar 20, 2025", status: "Trial", statusVariant: "info-light" as const },
]
</script>

<template>
  <div class="mx-auto flex w-full max-w-2xl flex-col">
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Service</TableHead>
          <TableHead>Plan</TableHead>
          <TableHead>Billing</TableHead>
          <TableHead>Status</TableHead>
          <TableHead class="text-right">Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow v-for="sub in subscriptions" :key="sub.service">
          <TableCell>
            <div class="flex flex-col">
              <span class="text-sm font-medium">{{ sub.service }}</span>
              <span class="text-muted-foreground text-xs">Next: {{ sub.nextBilling }}</span>
            </div>
          </TableCell>
          <TableCell>
            <Badge :variant="sub.planVariant" size="sm">{{ sub.plan }}</Badge>
          </TableCell>
          <TableCell class="text-sm">{{ sub.billing }}</TableCell>
          <TableCell>
            <Badge :variant="sub.statusVariant" size="sm">{{ sub.status }}</Badge>
          </TableCell>
          <TableCell class="text-right">
            <Button variant="ghost" size="sm" class="h-7">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-settings size-3.5">
                <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
                <circle cx="12" cy="12" r="3" />
              </svg>
              Manage
            </Button>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </div>
</template>