import { Check } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { useCurrency } from "@/lib/currency";

export interface PlanSpec {
  icon: LucideIcon;
  label: string;
  value: string;
}

export interface PlanCardData {
  name: string;
  subtitle: string;
  price: number;          // USD
  image?: string;         // square icon (e.g. minecraft block)
  iconNode?: React.ReactNode;
  popular?: boolean;
  specs: PlanSpec[];      // 4 specs (label/value)
  features: string[];
  orderLink?: string;
}

export function PlanCard({ plan }: { plan: PlanCardData }) {
  const { format } = useCurrency();
  return (
    <div
      className={`relative flex flex-col rounded-2xl bg-card/80 p-6 ring-1 transition hover:-translate-y-1 ${
        plan.popular
          ? "ring-primary/40 shadow-[0_0_40px_-10px_hsl(var(--uv-bright)/0.6)]"
          : "ring-white/5 hover:ring-primary/30"
      }`}
    >
      {plan.popular && (
        <div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-success px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-black shadow-lg">
          Most Popular
        </div>
      )}

      {/* Header */}
      <div className="mb-5 flex items-center gap-4">
        {plan.image ? (
          <img
            src={plan.image}
            alt=""
            className="h-14 w-14 object-contain"
            style={{ imageRendering: "pixelated" }}
          />
        ) : (
          <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-white/5 ring-1 ring-white/10">
            {plan.iconNode}
          </div>
        )}
        <div>
          <h3 className="text-2xl font-extrabold leading-tight">{plan.name}</h3>
          <p className="mt-0.5 text-sm text-muted-foreground">{plan.subtitle}</p>
        </div>
      </div>

      {/* Price */}
      <div className="mb-5 flex items-baseline gap-1">
        <span className="text-4xl font-extrabold text-success">{format(plan.price)}</span>
        <span className="text-muted-foreground">/month</span>
      </div>

      {/* Specs grid */}
      <div className="mb-5 grid grid-cols-2 gap-x-6 gap-y-3">
        {plan.specs.map((s) => (
          <div key={s.label} className="flex items-center gap-2 text-sm">
            <s.icon className="h-5 w-5 text-success" />
            <span className="font-medium text-foreground/90">{s.value}</span>
          </div>
        ))}
      </div>

      {/* Divider */}
      <div className="my-3 h-px bg-white/5" />

      {/* Features */}
      <div className="mb-6 space-y-2.5">
        {plan.features.slice(0, 4).map((f) => (
          <div key={f} className="flex items-center gap-3 text-sm text-foreground/85">
            <Check className="h-4 w-4 text-success" strokeWidth={3} />
            {f}
          </div>
        ))}
      </div>

      {/* CTA */}
      <a
        href={plan.orderLink ?? "https://zyrocloud.com/client/index.php?rp=/login"}
        target="_blank"
        rel="noreferrer"
        className="mt-auto inline-flex w-full items-center justify-center rounded-full bg-success py-3.5 text-base font-semibold text-black transition hover:brightness-110 hover:shadow-[0_8px_30px_-8px_oklch(0.78_0.19_152/0.7)]"
      >
        Get Started
      </a>
    </div>
  );
}