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 { useService } from './useService';

const PRICING_FORM_ID = 'pricing-form';

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

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

        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
                        form={formId}
                        htmlType="submit"
                        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]' : ''}`}
                    >
                        {t('pages.pricing.orderSummary.goPayNow')}
                    </Button>
                </div>
            </div>
        );
    }
);

OrderSummary.displayName = 'OrderSummary';

export default OrderSummary;