export function PricingCard({ name, price, features, highlighted }) {
return (
<div className={`rounded-2xl border p-6 ${highlighted ? "border-indigo-500 shadow-xl" : "border-slate-200"}`}>
{highlighted && (
<span className="mb-3 inline-block rounded-full bg-indigo-600 px-3 py-1 text-xs font-semibold text-white">
Most popular
</span>
)}
<h3 className="text-lg font-semibold text-slate-900">{name}</h3>
<p className="mt-2 text-3xl font-bold text-slate-900">
{price}<span className="text-sm font-normal text-slate-500">/mo</span>
</p>
<ul className="mt-4 space-y-2 text-sm text-slate-600">
{features.map((f) => <li key={f}>✓ {f}</li>)}
</ul>
<button className="mt-6 w-full rounded-lg bg-slate-900 py-2.5 text-sm font-semibold text-white">
Choose plan
</button>
</div>
);
}