import React from 'react';
import { Check, X } from 'lucide-react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

const PricingTable: React.FC = () => {
    const { t } = useTranslation();

    const tiers = [
        {
            name: t('marketing.pricing.tiers.starter.name'),
            price: '$0',
            period: t('marketing.pricing.perMonth'),
            description: t('marketing.pricing.tiers.starter.description'),
            features: [
                t('marketing.pricing.tiers.starter.features.0'),
                t('marketing.pricing.tiers.starter.features.1'),
                t('marketing.pricing.tiers.starter.features.2'),
                t('marketing.pricing.tiers.starter.features.3'),
                t('marketing.pricing.tiers.starter.features.4'),
            ],
            notIncluded: [
                t('marketing.pricing.tiers.starter.notIncluded.0'),
                t('marketing.pricing.tiers.starter.notIncluded.1'),
                t('marketing.pricing.tiers.starter.notIncluded.2'),
                t('marketing.pricing.tiers.starter.notIncluded.3'),
            ],
            cta: t('marketing.pricing.tiers.starter.cta'),
            ctaLink: '/signup',
            popular: false,
        },
        {
            name: t('marketing.pricing.tiers.pro.name'),
            price: '$29',
            period: t('marketing.pricing.perMonth'),
            description: t('marketing.pricing.tiers.pro.description'),
            features: [
                t('marketing.pricing.tiers.pro.features.0'),
                t('marketing.pricing.tiers.pro.features.1'),
                t('marketing.pricing.tiers.pro.features.2'),
                t('marketing.pricing.tiers.pro.features.3'),
                t('marketing.pricing.tiers.pro.features.4'),
                t('marketing.pricing.tiers.pro.features.5'),
            ],
            notIncluded: [
                t('marketing.pricing.tiers.pro.notIncluded.0'),
                t('marketing.pricing.tiers.pro.notIncluded.1'),
                t('marketing.pricing.tiers.pro.notIncluded.2'),
            ],
            cta: t('marketing.pricing.tiers.pro.cta'),
            ctaLink: '/signup?plan=pro',
            popular: true,
        },
        {
            name: t('marketing.pricing.tiers.business.name'),
            price: '$99',
            period: t('marketing.pricing.perMonth'),
            description: t('marketing.pricing.tiers.business.description'),
            features: [
                t('marketing.pricing.tiers.business.features.0'),
                t('marketing.pricing.tiers.business.features.1'),
                t('marketing.pricing.tiers.business.features.2'),
                t('marketing.pricing.tiers.business.features.3'),
                t('marketing.pricing.tiers.business.features.4'),
                t('marketing.pricing.tiers.business.features.5'),
                t('marketing.pricing.tiers.business.features.6'),
            ],
            notIncluded: [],
            cta: t('marketing.pricing.contactSales'),
            ctaLink: '/contact',
            popular: false,
        },
    ];

    return (
        <div className="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {tiers.map((tier) => (
                <div
                    key={tier.name}
                    className={`relative flex flex-col p-8 bg-white dark:bg-gray-800 rounded-2xl border ${tier.popular
                            ? 'border-brand-500 shadow-xl scale-105 z-10'
                            : 'border-gray-200 dark:border-gray-700 shadow-sm'
                        }`}
                >
                    {tier.popular && (
                        <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 px-4 py-1 bg-brand-500 text-white text-sm font-medium rounded-full">
                            {t('marketing.pricing.mostPopular')}
                        </div>
                    )}

                    <div className="mb-8">
                        <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{tier.name}</h3>
                        <p className="text-gray-500 dark:text-gray-400 text-sm mb-6">{tier.description}</p>
                        <div className="flex items-baseline">
                            <span className="text-4xl font-bold text-gray-900 dark:text-white">{tier.price}</span>
                            <span className="text-gray-500 dark:text-gray-400 ml-2">{tier.period}</span>
                        </div>
                    </div>

                    <ul className="flex-1 space-y-4 mb-8">
                        {tier.features.map((feature) => (
                            <li key={feature} className="flex items-start">
                                <Check className="w-5 h-5 text-green-500 mr-3 shrink-0" />
                                <span className="text-gray-600 dark:text-gray-300 text-sm">{feature}</span>
                            </li>
                        ))}
                        {tier.notIncluded.map((feature) => (
                            <li key={feature} className="flex items-start opacity-50">
                                <X className="w-5 h-5 text-gray-400 mr-3 shrink-0" />
                                <span className="text-gray-500 dark:text-gray-400 text-sm">{feature}</span>
                            </li>
                        ))}
                    </ul>

                    <Link
                        to={tier.ctaLink}
                        className={`w-full py-3 px-4 rounded-lg text-center font-medium transition-colors ${tier.popular
                                ? 'bg-brand-600 text-white hover:bg-brand-700'
                                : 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600'
                            }`}
                    >
                        {tier.cta}
                    </Link>
                </div>
            ))}
        </div>
    );
};

export default PricingTable;
