import { TextAutoTooltip } from '../../components/Text/TextAutoTooltip';

import type { SelectFieldProps } from './SelectField';
import { StyledOption } from './styled';
import type { SelectOption } from './types';

type OptionComponent = NonNullable<SelectFieldProps<SelectOption>['optionComponent']>;

const DefaultOptionRenderer: OptionComponent['renderer'] = (props) => {
  return (
    <StyledOption>
      <TextAutoTooltip>{props.option.label}</TextAutoTooltip>
    </StyledOption>
  );
};

export const defaultOptionComponent: OptionComponent = {
  renderer: DefaultOptionRenderer,
  height: 32,
};