import { MagnifyingGlassIcon, XIcon } from '@phosphor-icons/react';
import { Button } from './button';
import { InputGroup, InputGroupAddon, InputGroupInput } from './input-group';

type SearchInputProps = {
  keywords: string;
  setKeyword: (value: string) => void;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

const SearchInput = ({ keywords, setKeyword, onChange }: SearchInputProps) => {
  const onClearSearch = () => {
    setKeyword('');
  };

  return (
    <InputGroup className="w-70 bg-white">
      <InputGroupInput
        id="keywords"
        placeholder="Search...."
        value={keywords}
        onChange={onChange}
      />
      <InputGroupAddon>
        <MagnifyingGlassIcon />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        {keywords !== '' && (
          <Button
            variant="ghost"
            size="icon-sm"
            className="rounded-full"
            onClick={onClearSearch}
          >
            <XIcon />
          </Button>
        )}
      </InputGroupAddon>
    </InputGroup>
  );
};

export default SearchInput;