import { Check } from "lucide-react";
import { LinkButton } from "@/components/ui/LinkButton";
import { cn } from "@/lib/utils";
import type { PricingTier } from "@/types";

export function PricingCard({
  name,
  price,
  cadence,
  description,
  features,
  highlighted,
  ctaLabel,
  ctaHref,
}: PricingTier) {
  return (
    <div
      className={cn(
        "flex flex-col rounded-md border p-8",
        highlighted ? "border-primary bg-paper shadow-3" : "border-line bg-paper shadow-1"
      )}
    >
      {highlighted && (
        <span className="mb-4 w-fit rounded-sm bg-tag-bg px-2 py-0.5 font-mono text-[11px] uppercase tracking-wider text-primary">
          Most Selected
        </span>
      )}
      <h3 className="font-display text-h2 font-normal text-ink">{name}</h3>
      <p className="mt-2 text-body-sm text-slate">{description}</p>
      <p className="mt-6 font-display text-display-md text-ink">
        {price}
        {cadence && <span className="ml-1 text-body-sm font-sans text-slate">/{cadence}</span>}
      </p>
      <ul className="mt-6 flex flex-col gap-3">
        {features.map((f) => (
          <li key={f} className="flex items-start gap-2.5 text-body-sm text-ink-soft">
            <Check className="mt-0.5 size-4 shrink-0 text-primary" aria-hidden="true" />
            {f}
          </li>
        ))}
      </ul>
      <LinkButton
        href={ctaHref}
        variant={highlighted ? "primary" : "secondary"}
        size="md"
        className="mt-8 justify-center"
      >
        {ctaLabel}
      </LinkButton>
    </div>
  );
}