import { TextField, InputAdornment } from '@mui/material';
import { Search } from './icons/icons';

function SearchComponent({
  placeholder = 'Поиск...',
  value,
  onChange,
  height = '2rem',
  ...rest
}) {
  const handleChange = (e) => {
    onChange(e.target.value);
  };
  return (
    <TextField
      {...rest}
      size="small"
      placeholder={placeholder}
      value={value}
      onChange={handleChange}
      sx={{
        minWidth: '20rem',
        maxWidth: '100%',
        width: '100%',
        flex: 1,
        '& .MuiOutlinedInput-root': {
          height: height,
          maxHeight: '5rem',
          borderRadius: '0.5rem',
          backgroundColor: '#fff',
          padding: '0.25rem 0.75rem',
          '& fieldset': {
            border: '0.06rem solid rgba(0, 0, 0, 0.1)',
          },
          '&.Mui-focused fieldset': {
            borderWidth: '0.1rem',
          },
        },
        '& .MuiOutlinedInput-input': {
          padding: 0,
        },
      }}
      slotProps={{
        input: {
          startAdornment: (
            <InputAdornment position="start">
              <Search />
            </InputAdornment>
          ),
        },
      }}
    />
  );
}

export default SearchComponent;