import { memo } from 'react';

import { Icon } from '@iconify/react';
import { useTranslation } from 'react-i18next';

import checkOffIcon from '@/assets/iconify/multi-color/check-off.svg';
import checkOnIcon from '@/assets/iconify/multi-color/check-on.svg';
import { PlanTagType } from '@/defines';
import { useResponsive } from '@/hooks/useSize';

const PLAN_TAG_TYPE_I18N_KEY: Record<PlanTagType, string> = {
    [PlanTagType.NONE]: '',
    [PlanTagType.MOST_POPULAR]: 'mostPopular',
    [PlanTagType.LIMITED_TIME]: 'limitedTime',
};

export interface PlanCardProps {
    id: string;
    title: string;
    subTitle: string;
    introduce: string;
    tag?: string;
    tagType?: PlanTagType;
    isSelected?: boolean;
    onClick?: () => void;
}

const PlanCard = memo(
    ({ title, subTitle, introduce, tag, tagType, isSelected = false, onClick }: PlanCardProps) => {
        const { t } = useTranslation();
        const { isMobile } = useResponsive();
        return (
            <div
                className={`relative box-border cursor-pointer transition-all bg-white/10 border-2 ${
                    isMobile
                        ? 'flex-row-bc py-3 px-4 w-full rounded-lg'
                        : 'flex-col-c p-[33px] w-full rounded-2xl gap-4'
                } ${
                    isSelected
                        ? 'border-[#0FA4E9]'
                        : `${isMobile ? 'border-transparent' : 'border-white/10'}`
                }`}
                onClick={onClick}
            >
                {tagType != null && tagType !== PlanTagType.NONE && (
                    <div
                        className={`absolute top-[-13.5px] bg-[#0FA4E9] px-4 ${isMobile ? 'end-[21.13px] rounded-[4px] h-[24px]' : 'start-[21.13px] rounded-full py-1'}`}
                    >
                        <span className="text-black text-[14px] leading-[24px] font-normal uppercase">
                            {tag?.trim()
                                ? tag
                                : t(`pages.pricing.planTag.${PLAN_TAG_TYPE_I18N_KEY[tagType]}`)}
                        </span>
                    </div>
                )}
                {isMobile ? (
                    <>
                        <div className="flex items-baseline gap-2">
                            <span className="text-white text-2xl font-bold leading-[1.3] whitespace-nowrap">
                                {subTitle}
                            </span>
                            <span className="text-[#646776] text-base font-normal leading-[1.3] whitespace-nowrap">
                                {title}
                            </span>
                        </div>
                        <Icon
                            icon={isSelected ? checkOnIcon : checkOffIcon}
                            className={`w-6 h-6 flex-shrink-0`}
                        />
                    </>
                ) : (
                    <>
                        <h3 className="text-white font-normal leading-[1.5] text-center text-[28px]">
                            {title}
                        </h3>
                        <span className="text-white font-normal leading-[1.11] text-center text-[36px]">
                            {subTitle}
                        </span>
                        <span className="text-white/80 font-normal leading-[1.5] text-center text-[22px]">
                            {introduce}
                        </span>
                    </>
                )}
            </div>
        );
    }
);

PlanCard.displayName = 'PlanCard';

export default PlanCard;
