'use client';

import { Check, Star } from 'lucide-react';

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

interface PricingCardProps {
    title: string;
    price: string;
    period: string;
    description: string;
    features: PricingFeature[];
    isPopular?: boolean;
    buttonText?: string;
    onButtonClick?: () => void;
    index: number;
}

export default function PricingCard({
    title,
    price,
    period,
    description,
    features,
    isPopular = false,
    buttonText = "Chọn gói này",
    onButtonClick,
    index,
}: PricingCardProps) {
    return (
        <div
            className={`relative bg-white rounded-2xl p-8 shadow-two hover:shadow-lg transition-all duration-300 ${isPopular ? 'border-2 border-red-500 transform lg:scale-105' : 'border border-stroke'
                }`}
        >
            {isPopular && (
                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <span className="bg-red-500 text-white px-4 py-1 rounded-full text-sm font-semibold flex items-center gap-1">
                        <Star className="w-4 h-4 fill-current" />
                        Phổ biến nhất
                    </span>
                </div>
            )}

            <div className="text-center mb-6">
                <h3 className="text-2xl font-bold text-black mb-2">{title}</h3>
                <p className="text-body-color text-sm">{description}</p>
            </div>

            <div className="text-center mb-8">
                <div className="flex items-end justify-center gap-1">
                    <span className="text-5xl font-bold text-red-500">{price}</span>
                    {period && <span className="text-body-color mb-2">/{period}</span>}
                </div>
            </div>

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

            <button
                onClick={onButtonClick}
                className={`w-full py-3 px-6 rounded-full font-semibold transition-all duration-300 ${isPopular
                        ? 'bg-red-500 text-white hover:bg-red-600 shadow-submit'
                        : 'border-2 border-red-500 text-red-500 hover:bg-red-500 hover:text-white'
                    }`}
            >
                {buttonText}
            </button>
        </div>
    );
}
