Table

import { SettingsIcon } from "lucide-react";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/cnippet-table";

import type React from "react";

const badgeStyles: Record<string, string> = {
  outline: "text-foreground",
  secondary: "border-transparent bg-secondary text-secondary-foreground",
  default: "border-transparent bg-primary text-primary-foreground",
  success:
    "border-transparent bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
  warning:
    "border-transparent bg-amber-500/15 text-amber-600 dark:text-amber-400",
  destructive: "border-transparent bg-destructive/15 text-destructive",
  info: "border-transparent bg-blue-500/15 text-blue-600 dark:text-blue-400",
};

function Badge({
  variant = "outline",
  className = "",
  children,
}: {
  variant?: string;
  className?: string;
  children?: React.ReactNode;
}): React.ReactElement {
  return (
    <span
      className={`inline-flex items-center gap-1.5 whitespace-nowrap rounded-md border px-2 py-0.5 font-medium text-xs [&_svg]:size-3 ${badgeStyles[variant] ?? ""} ${className}`}
    >
      {children}
    </span>
  );
}


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

export default function TableSubscriptions() {
  return (
    <div className="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 className="text-right">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {subscriptions.map((sub) => (
            <TableRow key={sub.service}>
              <TableCell>
                <div className="flex flex-col">
                  <span className="font-medium text-sm">{sub.service}</span>
                  <span className="text-muted-foreground text-xs">
                    Next: {sub.nextBilling}
                  </span>
                </div>
              </TableCell>
              <TableCell>
                <Badge size="sm" variant={sub.planVariant}>
                  {sub.plan}
                </Badge>
              </TableCell>
              <TableCell className="text-sm">{sub.billing}</TableCell>
              <TableCell>
                <Badge size="sm" variant={sub.statusVariant}>
                  {sub.status}
                </Badge>
              </TableCell>
              <TableCell className="text-right">
                <button className="inline-flex h-7 items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-2 font-medium text-foreground text-sm transition-colors hover:bg-accent hover:text-accent-foreground [&_svg]:size-3.5" type="button">
                  <SettingsIcon aria-hidden="true" className="size-3.5" />
                  Manage
                </button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}