import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

import { useScrollToCenter } from '../../useScrollToCenter';
import PlanCard from './PlanCard';
import { useService } from './useService';
import Wrapper from '../Wrapper';
import { encryptUrlParams } from '@/utils/requestCrypto';

export function Pricing() {
    const { t } = useTranslation();
    const navigate = useNavigate();
    const { plans, selectedPlanId, setSelectedPlanId } = useService();
    const scrollRef = useScrollToCenter();

    return (
        <section className="w-full pt-7 sm:pt-16 lg:pt-[176px]">
            <Wrapper>
                <div className="text-center max-w-[672px] mx-auto mb-8 sm:mb-12">
                    <h2 className="text-2xl sm:text-[32px] font-medium text-white">
                        {t('pages.home.pricing.title')}
                    </h2>
                    <p className="mt-4 text-white/60 text-base text-center">
                        {t('pages.home.pricing.subtitle')}
                    </p>
                </div>
            </Wrapper>
            <div
                ref={scrollRef}
                className="w-full sm:max-w-full sm:overflow-x-auto sm:overflow-y-hidden sm:no-scrollbar py-4"
            >
                <Wrapper className="w-fit min-w-full flex flex-wrap sm:flex-nowrap items-stretch 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}
                            onSelected={() => setSelectedPlanId(plan.id)}
                            onGetStarted={async () => {
                                const d = await encryptUrlParams({ planId: plan.id });
                                navigate(`/pricing?d=${d}`);
                            }}
                        />
                    ))}
                </Wrapper>
            </div>
        </section>
    );
}