interface PricingCardProps {
  title: string;
  price: string;
  period?: string;
  features: string[];
  buttonText: string;
  gradient: string;
  popular?: boolean;
  delay: number;
}

import { CheckIcon, ArrowRightIcon } from "@heroicons/react/24/outline";

const PricingCard: React.FC<PricingCardProps> = ({
  title,
  price,
  period,
  features,
  buttonText,
  gradient,
  popular = false,
  delay,
}) => (
  <div
    className={`relative rounded-3xl p-8 text-center transition-all duration-700 hover:-translate-y-3 ${
      popular
        ? "bg-gradient-to-br from-cyan-600 to-purple-600 text-white transform scale-105 shadow-2xl shadow-cyan-500/30"
        : "bg-gray-900/30 backdrop-blur-xl border border-gray-800/50 hover:border-gray-600/80"
    }`}
    style={{ animationDelay: `${delay}ms` }}
  >
    {popular && (
      <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-cyan-500 to-purple-500 px-6 py-2 rounded-full text-sm font-semibold animate-pulse">
        ⭐ Most Popular
      </div>
    )}
    <h3
      className={`text-2xl font-bold mb-4 ${
        popular ? "text-white" : "text-white"
      }`}
    >
      {title}
    </h3>
    <div
      className={`text-5xl font-bold mb-6 ${
        popular ? "text-white" : "text-white"
      }`}
    >
      {price}
      {period && (
        <span
          className={`text-lg ${popular ? "text-cyan-200" : "text-gray-400"}`}
        >
          {period}
        </span>
      )}
    </div>
    <ul
      className={`mb-8 space-y-4 ${
        popular ? "text-cyan-100" : "text-gray-300"
      }`}
    >
      {features.map((feature, index) => (
        <li
          key={index}
          className="flex items-center justify-center gap-3 group"
        >
          <CheckIcon className="w-5 h-5 text-cyan-400 group-hover:scale-110 transition-transform duration-300" />
          <span className="group-hover:text-white transition-colors duration-300">
            {feature}
          </span>
        </li>
      ))}
    </ul>
    <button
      className={`w-full py-4 rounded-2xl font-semibold transition-all duration-500 transform hover:scale-105 hover:shadow-xl ${gradient} group`}
    >
      <span className="flex items-center justify-center gap-2">
        {buttonText}
        <ArrowRightIcon className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" />
      </span>
    </button>
  </div>
);

export default PricingCard;