import Link from "next/link";
import { ArrowRight, Check } from "lucide-react";
import { Icon } from "../Icon";
import { money } from "@/lib/format";
import type { Product } from "@/lib/catalog";

export function ProductCard({ p }: { p: Product }) {
  return (
    <article className="card card-hover flex flex-col p-5 sm:p-6">
      <div className="flex items-start justify-between gap-3">
        <span className="grid h-12 w-12 shrink-0 place-items-center rounded-2xl text-white shadow-lg" style={{ background: `linear-gradient(135deg, ${p.color}, color-mix(in oklab, ${p.color} 55%, #06b6d4))` }}><Icon name={p.icon} size={22} /></span>
        <div className="flex flex-wrap justify-end gap-1">{p.categories.slice(0, 2).map((c) => <Link key={c.slug} href={`/products?c=${c.slug}`} className="badge gray hover:bg-blue-50 hover:text-brand">{c.name}</Link>)}</div>
      </div>
      <h3 className="mt-4 text-lg font-bold tracking-tight"><Link href={`/products/${p.slug}`} className="after:absolute-none hover:text-brand">{p.name}</Link></h3>
      <p className="mt-1 text-sm text-slate-500">{p.tagline}</p>
      <ul className="mt-4 space-y-1.5 text-sm text-slate-600">
        {p.highlights.slice(0, 3).map((h) => <li key={h} className="flex items-center gap-2"><Check size={14} className="shrink-0 text-brand" />{h}</li>)}
      </ul>
      <div className="mt-auto flex items-end justify-between gap-3 pt-5">
        <div><div className="text-[11px] font-medium uppercase tracking-wider text-slate-400">From</div>
          <div className="text-xl font-extrabold tracking-tight">{p.from ? money(p.from) : "Custom"}{p.from > 0 && <span className="text-xs font-medium text-slate-400">{p.plans[0]?.period === "once" ? " one-time" : "/mo"}</span>}</div></div>
        <Link href={`/products/${p.slug}`} className="btn btn-primary btn-sm">Details <ArrowRight size={14} /></Link>
      </div>
    </article>
  );
}