import React from 'react';
import './image-radio.css';
import Iconsvg from '../Icon/Icon';

type OptionsProps = {
    label: string,
    value: string | number,
    icon?:any
}
type Props = {
    checked: string,
    disable?: boolean,
    iconShow?: boolean,
    labelShow?: boolean
    size?: 'default' | 'small' | 'medium' | 'large',
    handleChange: (e:React.ChangeEvent<HTMLInputElement>) => void;
}
  
const cardOptions:OptionsProps[] = [
    {
        label: 'Visa',
        value: 'visa',
        icon: 'personSolid'
    },
    {
        label: 'Paypal',
        value: 'paypal',
        icon: 'phoneSolid'
    },
    {
        label: 'Master Card',
        value: 'masterCard',
        icon: 'shareSolid'
    },
    {
        label: 'Maestro',
        value: 'maestro',
        icon: 'lockSolid'
    }
]

const ImageRadio = (props:Props) => {
    const {checked, disable,size,iconShow, labelShow, handleChange} = props;
    return (
        <div>
            {
            cardOptions && cardOptions.map((item)=>(
            <label key={item.label} className={`image-radio ${size ? `image-radio-size-${size}` : ''}`}>
                <input disabled={disable} onChange={handleChange} type='radio' id={item.label} name={item.label} value={item.value} checked={checked === item.value} readOnly/>
                <span className={`label-text ${iconShow && labelShow ? 'icon-label' : ''}`}>{iconShow && <Iconsvg name={item.icon}/>}{labelShow && item.label}</span>
            </label>
            ))
            
        }
        </div>
    )
}

export default ImageRadio;