import { FC, useState } from 'react';
import { Group } from '@/components/ui/group';
import { twx } from '@/utils';

type SearchInputProps = {
  className?: string;
  placeholder: string;
  onSearch: (keyWord: string) => void;
};

export const SearchInput: FC<SearchInputProps> = ({
  className,
  placeholder,
  onSearch,
}) => {
  const [keyWord, setKeyWord] = useState('');
  return (
    <Group
      className={twx(
        'w-full items-center border dark:border-zinc-600 text-sm',
        className,
      )}
    >
      <input
        className="w-full bg-white p-2 outline-none dark:bg-zinc-700"
        value={keyWord}
        onChange={(e) => setKeyWord(e.target.value)}
        placeholder={placeholder}
        autoFocus
      />
      <button
        className="border-l bg-white p-2 dark:border-zinc-700 dark:bg-zinc-500"
        onClick={() => onSearch(keyWord)}
      >
        <div className="i-mdi-magnify text-xl text-opacity-40" />
      </button>
    </Group>
  );
};
