import React from 'react';
import SearchIcon from '../icons/SearchIcon';

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

export default function SearchBox({ value, onChange }: Props) {
  return (
    <div className="bg-white inline-flex rounded-xl px-4 h-12 w-full items-center content-center">
      <SearchIcon stroke="#8C90A3" />
      <input
        onChange={onChange}
        value={value}
        placeholder="جستجو"
        className="text-[#8C90A3] block outline-none border-none focus:ring-0 focus:outline-none text-sm px-[7px] h-full items-center w-full"
        type="text"
      />
    </div>
  );
}