/*
 * @Author: 赵伟
 * @Date: 2024-04-17 16:59:42
 * @Description: 自定义 Radio
 */

import classNames from 'classnames';
import './index.less';

export type KFRadioItem = {
  key: string;
  title: string;
  icon?: React.ReactNode;
};

type KFRadioProps = {
  items: KFRadioItem[];
  value?: string;
  style?: React.CSSProperties;
  className?: string;
  onChange?: (value: string) => void;
};

function KFRadio({ items, value, style, className, onChange }: KFRadioProps) {
  return (
    <span className={classNames('kf-radio', className)} style={style}>
      {items.map((item) => {
        return (
          <span
            key={item.key}
            className={
              value === item.key
                ? classNames('kf-radio__item', 'kf-radio__item--active')
                : 'kf-radio__item'
            }
            onClick={() => onChange?.(item.key)}
          >
            {item.icon}
            <span style={{ marginLeft: '5px' }}>{item.title}</span>
          </span>
        );
      })}
    </span>
  );
}

export default KFRadio;
