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

export function ListSearch({
  placeholder,
  onSubmit
}: {
  readonly placeholder?: string;
  readonly onSubmit: (value: string) => void;
}) {
  const [searchValue, setSearchValue] = useState<string>('');
  return (
    <form
      onSubmit={event => {
        event.preventDefault();
        onSubmit(searchValue);
      }}
    >
      <Stack direction="row">
        <InputGroup
          flex="1"
          startElement={
            <Icon color="colorPalette.500">
              <i className="nf nf-oct-search" />
            </Icon>
          }
        >
          <Input
            value={searchValue}
            onChange={event => setSearchValue(event.currentTarget.value)}
            onSubmit={event => event.preventDefault()}
            placeholder={placeholder}
          />
        </InputGroup>
        <Button type="submit" border="none">
          Refresh
        </Button>
      </Stack>
    </form>
  );
}