import Link from "next/link";
import { Price } from "@/lib/currency";

export type PlanCardData = {
  name: string;
  price: number;
  period: string;
  features: string[];
  isPopular: boolean;
  checkoutToken: string;
};

export default function PlanCard({
  plan,
  ctaLabel = "Get Started",
}: {
  plan: PlanCardData;
  ctaLabel?: string;
}) {
  return (
    <div
      className={`relative flex flex-col rounded-3xl border bg-white p-7 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${
        plan.isPopular ? "border-brand-600 ring-2 ring-brand-600/20" : "border-slate-100"
      }`}
    >
      {plan.isPopular && (
        <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-brand-600 px-4 py-1 text-xs font-bold uppercase tracking-wide text-white shadow-md">
          Most Popular
        </span>
      )}
      <h3 className="text-lg font-bold text-slate-900">{plan.name}</h3>
      <p className="mt-3 text-3xl font-extrabold text-slate-900">
        <Price bdt={plan.price} />
        <span className="text-sm font-medium text-slate-400"> / {plan.period}</span>
      </p>
      <Link
        href={`/checkout/${plan.checkoutToken}/`}
        className={`mt-5 rounded-xl px-5 py-3 text-center text-sm font-semibold transition-colors ${
          plan.isPopular
            ? "bg-brand-600 text-white hover:bg-brand-700"
            : "border border-brand-600 text-brand-600 hover:bg-brand-50"
        }`}
      >
        {ctaLabel}
      </Link>
      <p className="mt-6 text-xs font-semibold uppercase tracking-wide text-slate-400">
        Plan includes:
      </p>
      <ul className="mt-3 space-y-2.5">
        {plan.features.map((feature, i) => (
          <li key={i} className="flex items-start gap-2.5 text-sm text-slate-600">
            <svg
              className="mt-0.5 h-4 w-4 shrink-0 text-brand-600"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
            </svg>
            {feature}
          </li>
        ))}
      </ul>
    </div>
  );
}