import * as React from 'react';
import Paper from '@mui/material/Paper';
import InputBase from '@mui/material/InputBase';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import DirectionsIcon from '@mui/icons-material/Directions';
 import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";

export default function SearchBar(props) {
  return (
    <Paper
      component="form"
      sx={{ display: 'flex', alignItems: 'center'}}
    >
      <InputBase
        sx={{flex: 1 }}
        placeholder="Search Catalog"
        inputProps={{ 'aria-label': `search catalog` }}
      />
      <IconButton type="submit" sx={{ p: '18px' }} aria-label="search">
        <SearchIcon />
      </IconButton>
      <Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
      <IconButton sx={{ p: '8px' }} aria-label="clear">
        <ClearOutlinedIcon />
      </IconButton>
    </Paper>
  );
}