import { Button, Icon, Input, InputGroup, Stack } from '@chakra-ui/react';

export function WorkingListSearch({
  value,
  onChange,
  onSubmit
}: {
  value: string;
  onChange: (value: string) => void;
  onSubmit: (value: string) => void;
}) {
  return (
    <form
      onSubmit={event => {
        event.preventDefault();
        onSubmit(value);
      }}
    >
      <Stack direction="row">
        <InputGroup
          flex="1"
          startElement={
            <Icon color="colorPalette.500">
              <i className="nf nf-oct-search" />
            </Icon>
          }
        >
          <Input
            value={value}
            onChange={event => onChange(event.currentTarget.value)}
            placeholder="Search works..."
          />
        </InputGroup>
        <Button type="submit" border="none">
          Refresh
        </Button>
      </Stack>
    </form>
  );
}