nomo-web/src/pages/pricing/components/PricingContent/index.tsx

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';
import UserInfo from '../UserInfo';

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 ${isMobile ? 'gap-5' : 'gap-10'}`}>
                <span
                    className={`text-white font-semibold leading-[1.43] text-center uppercase ${isMobile ? 'text-[22px]' : 'text-[35px]'}`}
                >
                    {t('pages.pricing.title')}
                </span>
                <UserInfo />
                <span
                    className={`text-white font-semibold leading-[1.43] uppercase ${isMobile ? 'text-[16px]' : 'text-[22px]'}`}
                >
                    {t('pages.pricing.subTitle')}
                </span>
                <div className="flex flex-col gap-10">
                    <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;