import ecreIcons from '../../../components/core/icons';
import { translate } from '../../../Helper';

const SearchInput = ({ searchTerm, onSearchChange, placeholder = translate('search') }) => {
  return (
    <div className="ecre-flex-1 ecre-max-w-sm ecre-relative ecre-ml-auto">
        <div className="ecre-absolute ecre-left-3 ecre-top-1/2 ecre-transform -ecre-translate-y-1/2 ecre-text-gray-400 ecre-w-5 ecre-h-5">
            {ecreIcons.search}
        </div>
        <input
            type="text"
            placeholder={placeholder}
            value={searchTerm}
            onChange={(e) => onSearchChange(e.target.value)}
            className="!ecre-w-full !ecre-pl-10 !ecre-pr-4 !ecre-py-2 !ecre-border !ecre-shadow-none !ecre-border-gray-200 !ecre-rounded !ecre-text-sm !ecre-text-gray-900 focus:ecre-outline-none"
        />
    </div>
  );
};

export default SearchInput;