import { memo } from 'react';

import { useTranslation } from 'react-i18next';

import { useResponsive } from '@/hooks/useResponsive';

import PlanCard from '../PlanCard';
import OrderSummary from '../OrderSummary';
import { useAction } from './useAction';
import { useService } from './useService';

const PricingContent = memo(() => {
    const { t } = useTranslation();
    const { isMobile } = useResponsive();
    const { selectedPlanId, handlePlanClick } = useAction();
    const { plans } = useService();

    const selectedPlan = plans.find((plan) => plan.id === selectedPlanId) || null;

    return (
        <div className="max-w-[1440px] w-full px-[30px]">
            <div className="bg-[#0F1116] px-5 sm:px-6 lg:px-[100px] py-[30px] pb-[100px] my-[50px] rounded-[12px] flex flex-col gap-10">
                <div className="flex flex-col gap-5">
                    <h1 className="text-white text-[35px] font-semibold leading-[1.43] text-center uppercase">
                        {t('pages.pricing.title')}
                    </h1>
                </div>
                <div className="flex flex-col gap-10">
                    <div className="flex flex-col gap-2.5">
                        <div className="flex gap-2.5">
                            <span className="text-[#0EA5E9] text-[22px] font-semibold leading-[1.4]">
                                {t('pages.pricing.step3')}
                            </span>
                            <span className="text-white text-[22px] font-semibold leading-[1.4] uppercase">
                                {t('pages.pricing.step3Title')}
                            </span>
                        </div>
                        <p className="text-[#646776] text-sm font-medium leading-[1.4]">
                            {t('pages.pricing.description')}
                        </p>
                        <p className="text-[#646776] text-sm font-medium leading-[1.4]">
                            {t('pages.pricing.currencyNote')}
                        </p>
                    </div>
                    <div
                        className={`flex ${
                            isMobile
                                ? 'flex-col items-center'
                                : 'flex-row items-center justify-center'
                        } gap-8`}
                    >
                        {plans.map((plan) => (
                            <PlanCard
                                key={plan.id}
                                id={plan.id}
                                title={plan.title}
                                subTitle={plan.subTitle}
                                introduce={plan.introduce}
                                tag={plan.tag}
                                tagType={plan.tagType}
                                isSelected={selectedPlanId === plan.id}
                                onClick={() => handlePlanClick(plan.id)}
                            />
                        ))}
                    </div>
                </div>
                <OrderSummary selectedPlan={selectedPlan} />
            </div>
        </div>
    );
});

PricingContent.displayName = 'PricingContent';

export default PricingContent;