import React from 'react';
import { IUseRadio } from '../../hooks/hook';
import JDLabel from '../label/JDLabel';
import JDalign, { IJDalignProp } from '../align/Align';
import JDtypho from '../typho/Typho';

type Tradio = {
  key: string;
  value: any;
  label: string;
};
export interface IProp extends IJDalignProp, IUseRadio {
  btns: Tradio[];
  selectedValue: any;
  onChange: (v: any) => void;
}

export const Radio: React.FC<IProp> = ({ btns, onChange, selectedValue, ...props }) => {
  return (
    <JDalign
      className="JDradios"
      flex={{
        vCenter: true,
      }}
      {...props}
    >
      {btns.map(b => {
        const isSelected = b.value === selectedValue;
        return (
          <JDalign
            mr="normal"
            flex={{
              vCenter: true,
            }}
            className={`JDradios__radio ${isSelected &&
              'JDradios__radio--selected'}`}
          >
            <JDtypho
              mr="small"
              key={b.key}
              onClick={() => {
                onChange(b.value);
              }}
              className={`JDradios__circle`}
            />
            <JDLabel mb="no" txt={b.label} />
          </JDalign>
        );
      })}
    </JDalign>
  );
};

export default Radio;
