// Accept/reject vote. `value` is 'accept', 'reject' or null; clicking the
// active thumb clears it. Without onChange it renders read-only.
export default function Thumbs({ value, onChange, small }) {
  const thumb = (verdict, glyph, label) => (
    <button
      type="button"
      className={`thumb${value === verdict ? ' active' : ''}`}
      disabled={!onChange}
      onClick={(e) => {
        e.stopPropagation()
        onChange(value === verdict ? null : verdict)
      }}
      title={onChange ? label : undefined}
    >
      {glyph}
    </button>
  )
  return (
    <span className={`thumbs${small ? ' thumbs-small' : ''}`}>
      {thumb('accept', '👍', 'Accept (P)')}
      {thumb('reject', '👎', 'Reject (X)')}
    </span>
  )
}