import * as React from 'react';
import styles from './ReportPage.module.scss';

interface Props {
  id: string;
  value: string;
  placeholder: string;
  readOnly: boolean;
  onOpen: () => void;
}

/** Поле-кнопка: показывает выбранное значение и открывает пикер. */
export const PickerField: React.FC<Props> = ({ id, value, placeholder, readOnly, onOpen }) => (
  <button
    id={id}
    type="button"
    className={value ? styles.pickerValue : `${styles.pickerValue} ${styles.pickerValueEmpty}`}
    disabled={readOnly}
    onClick={onOpen}
  >
    {value || placeholder}
  </button>
);