import React, { FC } from 'react';
import { components } from 'react-select';
import { OptionProps } from 'react-select/lib/components/Option';
import { Tooltip } from '../../Tooltip';
import { OptionType } from '../Select';

export const Option: FC<OptionProps<OptionType>> = ({ children, ...props }) => {
  return (
    <components.Option {...props}>
      {children}
      {props.isDisabled && props.selectProps.disabledOptionText && (
        <Tooltip variant="secondary" boundariesElement="viewport">
          {props.selectProps.disabledOptionText}
        </Tooltip>
      )}
    </components.Option>
  );
};
