import React, { memo } from 'react';
import classNames from 'classnames';
import Style from './radioRect.module.less';
export default memo((props) => {
    const handleClick = (option) => {
        props?.onChange(option.value);
    };
    return (<div className={Style.radioRectPanel}>
            {props.options.map((item, index) => {
            let ImageItem = item.image;
            if (typeof item.image === 'string') {
                ImageItem = (<div className={Style.rectImg} style={{ backgroundImage: `url(${item.image})` }}/>);
            }
            return (<div key={index}>
                        <div className={classNames(Style.rectItem, {
                    [Style.rectItemSelected]: props.value === item.value,
                })} onClick={() => handleClick(item)}>
                            {ImageItem}
                        </div>
                        {item.name && (<div className={Style.rectText}>{item.name}</div>)}
                    </div>);
        })}
        </div>);
});