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

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

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

type KFRadioProps = {
  /** 选项 */
  items: KFRadioItem[];
  /** 当前选中项 */
  value?: string;
  /** 自定义样式 */
  style?: React.CSSProperties;
  /** 自定义类名 */
  className?: string;
  /** 选中回调 */
  onChange?: (value: string) => void;
};

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

export default KFRadio;
