Pricing Plan Card

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>
  );
}