import { Divider } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { Link } from 'react-router-dom';
import Categories from './Categories';
import Searchbar from './Searchbar';

const useStyles = makeStyles({
  root: {
    padding: '0 15%',
    fontFamily: 'Noto Sans KR',
  },
  headerWrapper: {
    display: 'flex',
    flexDirection: 'column',
  },
  searchbar: {
    margin: '2em',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  logo: {
    textDecoration: 'none',
    color: 'black',
    fontFamily: 'Oswald',
    fontSize: '1.5em',
  },
});

const Header = () => {
  const classes = useStyles();
  return (
    <div className={classes.headerWrapper}>
      <div className={classes.searchbar}>
        <Link className={classes.logo} to="/">
          FASHION AVENUE
        </Link>
        <Searchbar />
      </div>
      <Divider light />
      <Categories />
      <Divider light />
    </div>
  );
};

export default Header;