import { memo } from 'react';

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

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

import OrderSummaryItem from '../OrderSummaryItem';
import type { Plan } from '../PricingContent/useService';
import { useService } from './useService';

export interface OrderSummaryProps {
    selectedPlan: Plan | null;
}

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

    return (
        <div className="flex flex-col gap-5 bg-[#1B1D22] rounded-xl p-[25px_30px_25px_25px] shadow-[0px_4px_10px_0px_rgba(0,0,0,0.05)]">
            <div className="flex flex-col gap-5">
                <OrderSummaryItem label={t('pages.pricing.orderSummary.account')} value={userAccount} />
                <OrderSummaryItem
                    label={t('pages.pricing.orderSummary.currentSubscription')}
                    value={currentSubscription}
                />
                <OrderSummaryItem
                    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"
                    onClick={() => {
                        // Handle payment
                    }}
                >
                    {t('pages.pricing.orderSummary.goPayNow')}
                </Button>
            </div>
        </div>
    );
});

OrderSummary.displayName = 'OrderSummary';

export default OrderSummary;