Pricing Card

"use client";

import React from "react";

export interface PricingFeature {
  text: string;
  included: boolean;
}

export interface PricingCardProps {
  name: string;
  price: string;
  period?: string;
  description?: string;
  features: PricingFeature[];
  ctaText?: string;
  ctaHref?: string;
  highlighted?: boolean;
}

export function PricingCard({
  name,
  price,
  period = "/month",
  description,
  features,
  ctaText = "Get Started",
  ctaHref = "#",
  highlighted = false,
}: PricingCardProps) {
  return (
    <div
      className={`rounded-xl border p-6 ${highlighted ? "border-blue-600 shadow-lg" : ""}`}
    >
      <h3 className="font-bold text-lg">{name}</h3>
      <div className="mt-4">
        <span className="text-3xl font-bold">{price}</span>
        <span className="text-gray-500">{period}</span>
      </div>
      {description && (
        <p className="text-sm text-gray-500 mt-2">{description}</p>
      )}
      <ul className="mt-6 space-y-2">
        {features.map((f, i) => (
          <li key={i} className="flex items-center gap-2 text-sm">
            <span className={f.included ? "text-blue-600" : "text-gray-400"}>
              {f.included ? "✓" : "−"}
            </span>
            {f.text}
          </li>
        ))}
      </ul>
      <a
        href={ctaHref}
        className={`mt-6 block w-full text-center rounded-md py-2 text-sm font-medium ${highlighted ? "bg-blue-600 text-white" : "border"} hover:opacity-90`}
      >
        {ctaText}
      </a>
    </div>
  );
}