import { Button } from "@/registry/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/registry/ui/table"

const rows = [
  ["Projects", "1", "Unlimited", "Unlimited"],
  ["Requests / month", "10k", "5M", "Custom"],
  ["Team members", "1", "Up to 25", "Unlimited"],
  ["Audit log", "—", "90 days", "Unbounded"],
  ["SSO and SCIM", "—", "—", "Included"],
  ["Support", "Community", "Email", "Dedicated"],
]

export default function PricingTable() {
  return (
    <section className="px-6 py-20">
      <div className="text-center">
        <h2 className="text-3xl font-semibold tracking-tight">Compare plans</h2>
        <p className="mx-auto mt-3 max-w-md text-sm leading-relaxed text-muted">
          Every plan includes the API, the dashboard, and the CLI.
        </p>
      </div>

      <div className="mx-auto mt-12 max-w-3xl">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-1/3" />
              <TableHead>Hobby</TableHead>
              <TableHead>Team</TableHead>
              <TableHead>Enterprise</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableCell className="font-medium text-fg">Price</TableCell>
              <TableCell className="text-fg">$0</TableCell>
              <TableCell className="text-fg">$24 / user</TableCell>
              <TableCell className="text-fg">Custom</TableCell>
            </TableRow>

            {rows.map(([label, ...values]) => (
              <TableRow key={label}>
                <TableCell className="font-medium text-fg">{label}</TableCell>
                {values.map((value, index) => (
                  <TableCell key={index}>{value}</TableCell>
                ))}
              </TableRow>
            ))}

            <TableRow>
              <TableCell />
              <TableCell>
                <Button size="sm" variant="outline">
                  Start free
                </Button>
              </TableCell>
              <TableCell>
                <Button size="sm">Choose Team</Button>
              </TableCell>
              <TableCell>
                <Button size="sm" variant="outline">
                  Contact us
                </Button>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    </section>
  )
}