import Link from "next/link";
import type { Plan } from "@/lib/pricing";

export default function Pricing({ plans }: { plans: Plan[] }) {
  return (
    <section className="container py-14">
      <h2 className="text-2xl font-semibold tracking-tight">Simple, flat pricing</h2>
      <div className="mt-6 grid gap-6 sm:grid-cols-3">
        {plans.map((p) => (
          <div key={p.id} className={`card ${p.popular ? "ring-2 ring-primary" : ""}`}>
            {p.popular && <div className="mb-2 inline-block rounded-full bg-primary px-3 py-1 text-xs text-primary-foreground">Most popular</div>}
            <div className="text-lg font-semibold">{p.name}</div>
            <div className="mt-2 flex items-baseline gap-1">
              <div className="text-3xl font-bold">{p.price}</div>
              {p.periodicity && <div className="text-sm text-muted-foreground">{p.periodicity}</div>}
            </div>
            <p className="mt-2 text-sm text-muted-foreground">{p.description}</p>
            <ul className="mt-4 space-y-2 text-sm">
              {p.features.map((f, i) => <li key={i}>• {f}</li>)}
            </ul>
            <Link href={p.cta.href} className="btn-primary mt-6 no-underline w-full text-center">{p.cta.label}</Link>
          </div>
        ))}
      </div>
    </section>
  );
}