import { FC } from 'react';

import SearchIcon from '@material-hu/icons/material/Search';
import InputAdornment from '@material-hu/mui/InputAdornment';
import { useTheme } from '@material-hu/mui/styles';
import TextField from '@material-hu/mui/TextField';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

export type SearchControlProps = {
  searchInput: string;
  onChange: any;
  placeholder?: string;
};

export const SearchControl: FC<SearchControlProps> = props => {
  const { searchInput, onChange, placeholder = '' } = props;

  const theme = useTheme();

  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <TextField
      placeholder={placeholder}
      variant="outlined"
      value={searchInput}
      onChange={onChange}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <SearchIcon fontSize="small" />
          </InputAdornment>
        ),
      }}
      sx={{
        borderRadius: '4px',
        '& input': {
          p: 1.2,
          pl: 0.4,
          width: isMobile ? '120px' : '260px',
        },
        '& fieldset': {
          borderRadius: '6px',
        },
      }}
    />
  );
};

export default SearchControl;