import React from 'react';
import type { ReactElement } from 'react';
import { useTheme } from '../../../theme';
import List from '../../List';
import Icon from '../../Icon';

const Option = ({
  text,
  disabled = false,
  selected,
  onPress,
  highlighted = false,
}: {
  text: string | ReactElement;
  disabled?: boolean;
  selected: boolean;
  onPress: () => void;
  highlighted?: boolean;
}) => {
  const theme = useTheme();
  const props = {
    selected,
    disabled,
    onPress,
    title: text,
    suffix:
      selected === true ? (
        <Icon
          testID={
            typeof text === 'string' ? `selected-icon-${text}` : undefined
          }
          icon="checkmark"
          intent={disabled ? 'disabled-text' : 'primary'}
          size="small"
          style={{
            marginRight: theme.__hd__.select.space.suffixMarginRight,
          }}
        />
      ) : undefined,
  };
  return highlighted === true ? (
    <List.Item {...props} />
  ) : (
    <List.BasicItem {...props} />
  );
};

export default Option;