"use client";

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

interface PricingPlan {
  id: string;
  badge: string;
  price: string;
  subtitle: string;
  features: string[];
  buttons?: Array<{ text: string; href?: string; onClick?: () => void }>;
}

interface PricingCardEightProps {
  plans: PricingPlan[];
}

export const PricingCardEight: React.FC<PricingCardEightProps> = ({ plans }) => {
  return (
    <div className="max-w-6xl mx-auto px-4 py-16">
      <div className="grid md:grid-cols-3 gap-8">
        {plans.map((plan) => (
          <div
            key={plan.id}
            className="rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition"
          >
            <div className="bg-secondary-button p-6 space-y-4">
              <div className="text-sm font-semibold text-primary">{plan.badge}</div>
              <div className="text-3xl font-bold">{plan.price}</div>
              <div className="text-sm text-gray-600">{plan.subtitle}</div>
              <div className="flex gap-2">
                {plan.buttons?.map((button, idx) => (
                  <button
                    key={idx}
                    onClick={button.onClick}
                    className="flex-1 px-4 py-2 bg-primary text-white rounded font-semibold hover:bg-primary/90 transition"
                  >
                    {button.text}
                  </button>
                ))}
              </div>
            </div>
            <div className="p-6 space-y-3">
              {plan.features.map((feature, idx) => (
                <div key={idx} className="flex items-start gap-3">
                  <Check className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
                  <span className="text-sm text-gray-700">{feature}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
