"use client";

import * as React from "react";
import { Check, Minus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ComparisonPlan {
  name: string;
  price: string;
  popular?: boolean;
}

export interface ComparisonGroup {
  title: string;
  rows: { label: string; values: (boolean | string)[] }[];
}

const DEFAULT_PLANS: ComparisonPlan[] = [
  { name: "Free", price: "$0" },
  { name: "Pro", price: "$20", popular: true },
  { name: "Team", price: "$60" },
];

const DEFAULT_GROUPS: ComparisonGroup[] = [
  {
    title: "Usage",
    rows: [
      { label: "Component copies", values: ["2 / day", "Unlimited", "Unlimited"] },
      { label: "Seats", values: ["1", "1", "5"] },
      { label: "Private registry", values: [false, false, true] },
    ],
  },
  {
    title: "Tooling",
    rows: [
      { label: "MCP server", values: [false, true, true] },
      { label: "CLI installs", values: [true, true, true] },
      { label: "AI generation credits", values: [false, "500 / mo", "2,000 / mo"] },
    ],
  },
  {
    title: "Support",
    rows: [
      { label: "Community", values: [true, true, true] },
      { label: "Priority email", values: [false, true, true] },
      { label: "SSO + audit log", values: [false, false, true] },
    ],
  },
];

function Cell({ value }: { value: boolean | string }) {
  if (value === true) return <Check className="mx-auto size-4 text-emerald-500" />;
  if (value === false) return <Minus className="mx-auto size-4 text-muted-foreground/40" />;
  return <span className="text-sm text-muted-foreground">{value}</span>;
}

export function PricingComparisonTable({
  plans = DEFAULT_PLANS,
  groups = DEFAULT_GROUPS,
  className,
}: {
  plans?: ComparisonPlan[];
  groups?: ComparisonGroup[];
  className?: string;
}) {
  return (
    <div className={cn("w-full overflow-x-auto rounded-xl border", className)}>
      <table className="w-full min-w-2xl border-collapse">
        <thead className="sticky top-0 z-10 bg-card/95 backdrop-blur">
          <tr>
            <th className="w-2/5 p-4 text-start text-sm font-medium">Compare plans</th>
            {plans.map((plan) => (
              <th key={plan.name} className="p-4 text-center">
                <div className="space-y-1">
                  <div className="flex items-center justify-center gap-1.5">
                    <span className="text-sm font-medium">{plan.name}</span>
                    {plan.popular && (
                      <span className="rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-medium text-primary-foreground">
                        Popular
                      </span>
                    )}
                  </div>
                  <div className="text-xl font-semibold tabular-nums">{plan.price}</div>
                  <button
                    className={cn(
                      "mt-1 h-8 w-full rounded-md text-xs font-medium transition-colors",
                      plan.popular
                        ? "bg-primary text-primary-foreground hover:opacity-90"
                        : "border hover:bg-accent"
                    )}
                  >
                    Choose
                  </button>
                </div>
              </th>
            ))}
          </tr>
        </thead>

        <tbody>
          {groups.map((group) => (
            <React.Fragment key={group.title}>
              <tr>
                <td
                  colSpan={plans.length + 1}
                  className="bg-muted/40 px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground"
                >
                  {group.title}
                </td>
              </tr>
              {group.rows.map((row) => (
                <tr key={row.label} className="border-t transition-colors hover:bg-accent/40">
                  <td className="p-4 text-sm">{row.label}</td>
                  {row.values.map((value, index) => (
                    <td key={index} className="p-4 text-center">
                      <Cell value={value} />
                    </td>
                  ))}
                </tr>
              ))}
            </React.Fragment>
          ))}
        </tbody>
      </table>
    </div>
  );
}
Related components
