import React from 'react';
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';

type Props = {
  value: string;
  onChange: (val: string) => void;
  onSearch: () => void;
  placeholder?: string;
};

const SearchBar: React.FC<Props> = ({ value, onChange, onSearch, placeholder }) => {
  const handle = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch();
  };

  return (
    <form onSubmit={handle} className="flex flex-1 gap-2 items-center min-w-[200px] max-w-full">
      <input
        type="text"
        value={value}
        onChange={e => onChange(e.target.value)}
        className="
          w-full px-3 py-2 border border-gray-300 rounded-md 
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
          placeholder-gray-500 h-10
          text-black font-medium bg-white
          text-sm sm:text-base
        "
        placeholder={placeholder}
      />
    </form>
  );
};

export default SearchBar;