import React from 'react';
import { Check } from 'lucide-react';

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

interface PricingPlan {
  id: string;
  name: string;
  price: number;
  period: string;
  description: string;
  features: PricingFeature[];
  popular?: boolean;
  buttonText: string;
}

interface PricingCardEightProps {
  plan: PricingPlan;
  className?: string;
  onSelect?: (planId: string) => void;
}

export const PricingCardEight: React.FC<PricingCardEightProps> = ({
  plan,
  className = '',
  onSelect
}) => {
  const handleSelect = () => {
    if (onSelect) {
      onSelect(plan.id);
    }
  };

  const cardClasses = [
    'relative bg-white rounded-2xl shadow-lg border border-gray-200 p-8',
    'hover:shadow-xl transition-all duration-300',
    plan.popular ? 'ring-2 ring-blue-500 scale-105' : '',
    className
  ].filter(Boolean).join(' ');

  const buttonClasses = [
    'w-full py-3 px-6 rounded-lg font-semibold transition-colors duration-200',
    plan.popular
      ? 'bg-blue-600 text-white hover:bg-blue-700'
      : 'bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-300'
  ].join(' ');

  return (
    <div className={cardClasses}>
      {plan.popular && (
        <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
          <span className="bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-medium">
            Most Popular
          </span>
        </div>
      )}

      <div className="text-center">
        <h3 className="text-2xl font-bold text-gray-900 mb-2">{plan.name}</h3>
        <p className="text-gray-600 mb-6">{plan.description}</p>
        
        <div className="mb-8">
          <span className="text-5xl font-bold text-gray-900">${plan.price}</span>
          <span className="text-gray-600 ml-2">/{plan.period}</span>
        </div>
      </div>

      <div className="space-y-4 mb-8">
        {plan.features.map((feature, index) => (
          <div key={index} className="flex items-start space-x-3">
            <div className={`flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5 ${
              feature.included 
                ? 'bg-green-100 text-green-600' 
                : 'bg-gray-100 text-gray-400'
            }`}>
              <Check className="w-3 h-3" />
            </div>
            <span className={`text-sm ${
              feature.included ? 'text-gray-900' : 'text-gray-500 line-through'
            }`}>
              {feature.text}
            </span>
          </div>
        ))}
      </div>

      <button
        onClick={handleSelect}
        className={buttonClasses}
      >
        {plan.buttonText}
      </button>
    </div>
  );
};