import { memo } from 'react';

import { Button } from 'antd';
import { useTranslation } from 'react-i18next';

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

import LabelValueItem from '../LabelValueItem';
import type { Plan } from '../../useService';
import { useAction } from './useAction';
import { useService } from './useService';

export interface OrderSummaryProps {
    selectedPlan: Plan | null;
    selectedPayMethod: string | null;
}

const OrderSummary = memo(({ selectedPlan, selectedPayMethod }: OrderSummaryProps) => {
    const { t } = useTranslation();
    const { isMobile } = useResponsive();
    const { orderTotal } = useService({ selectedPlan });
    const { handlePayNow } = useAction({ selectedPlan, selectedPayMethod });

    return (
        <div
            className={`flex flex-col bg-[#1B1D22] rounded-xl shadow-[0px_4px_10px_0px_rgba(0,0,0,0.05)] ${isMobile ? 'p-[14px] gap-2' : 'p-[25px_30px_25px_25px] gap-5'}`}
        >
            <div className={`flex flex-col ${isMobile ? 'gap-2' : 'gap-5'}`}>
                <LabelValueItem
                    label={t('pages.pricing.orderSummary.orderTotal')}
                    value={orderTotal}
                    valueColor="text-[#0EA5E9]"
                />
            </div>
            <p className="text-[#646776] text-xs font-normal leading-[1.4]">
                {t('pages.pricing.orderSummary.terms')}
            </p>
            <div className={`flex gap-5 ${isMobile ? 'flex-col' : 'flex-row'}`}>
                <Button
                    className={`bg-[#0EA5E9] text-white text-sm font-medium leading-[1.4] uppercase rounded-[25px] px-[42px] py-[10px] h-auto border-none hover:bg-[#0EA5E9]/80 ${!isMobile ? 'w-[300px]' : ''}`}
                    onClick={handlePayNow}
                >
                    {t('pages.pricing.orderSummary.goPayNow')}
                </Button>
            </div>
        </div>
    );
});

OrderSummary.displayName = 'OrderSummary';

export default OrderSummary;