import { memo } from 'react';

import { Icon } from '@iconify/react';

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

export interface PayMethodCardProps {
    item: API.PayTypeItem;
    isSelected?: boolean;
    onClick?: () => void;
}

const PayMethodCard = memo(({ item, isSelected = false, onClick }: PayMethodCardProps) => {
    const { isMobile } = useResponsive();

    return (
        <div
            className={`relative box-border cursor-pointer transition-all bg-white/10 border-2 flex-row-bc ${
                isMobile
                    ? 'py-3 px-4 w-full rounded-lg'
                    : 'px-8 py-6 w-full max-w-[574px] rounded-2xl gap-4'
            } ${
                isSelected
                    ? 'border-[#0FA4E9]'
                    : `${isMobile ? 'border-transparent' : 'border-white/10'}`
            }`}
            onClick={onClick}
        >
            <div className="flex items-center gap-2">
                <div className="w-[50px] h-8 rounded-[4px] border border-[#d9d9d9] bg-white flex items-center justify-center overflow-hidden">
                    <img
                        src={item.icon}
                        alt={item.name}
                        className="h-5 w-auto max-w-[42px] object-contain"
                    />
                </div>
                <span className="text-white text-2xl font-bold leading-8 whitespace-nowrap">
                    {item.name}
                </span>
            </div>
            <Icon
                icon={isSelected ? checkOnIcon : checkOffIcon}
                className="w-6 h-6 flex-shrink-0"
            />
        </div>
    );
});

PayMethodCard.displayName = 'PayMethodCard';

export default PayMethodCard;
