import { Cross } from '@transferwise/icons';
import { clsx } from 'clsx';
import { useIntl } from 'react-intl';
import dateTriggerMessages from '../../../dateLookup/dateTrigger/DateTrigger.messages';

export interface SelectInputClearButtonProps extends Pick<
  React.ComponentPropsWithoutRef<'button'>,
  'className' | 'onClick'
> {}

/**
 * A button component used to clear the selected value in a SelectInput.
 */
export function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {
  const intl = useIntl();

  return (
    <button
      type="button"
      aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}
      className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}
      onClick={onClick}
    >
      <Cross size={16} />
    </button>
  );
}