import type { JSX } from 'react'
import { IconButton } from './IconButton'
import { TextField } from './TextField'

export interface FilterInputProps {
  label: string
  value: string
  onChange(value: string): void
  placeholder?: string
}

const clearIcon = (
  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M6 6l12 12M18 6L6 18" />
  </svg>
)

export function FilterInput(props: FilterInputProps): JSX.Element {
  return (
    <TextField
      label={props.label}
      labelMode="inline"
      type="search"
      value={props.value}
      placeholder={props.placeholder}
      onValueChange={props.onChange}
      trailing={
        props.value ? (
          <IconButton icon={clearIcon} label={`Clear ${props.label}`} onClick={() => props.onChange('')} />
        ) : undefined
      }
    />
  )
}