import { makeStyles } from '@mui/styles';
import { Link } from 'react-router-dom';
import React from 'react';
import { CATEGORIES } from '../../common/constants';

const useStyles = makeStyles({
  root: {
    margin: '10px 0 20px 0',
    padding: '0 15%',
    fontFamily: 'Noto Sans KR',
  },
  link: {
    fontSize: '16px',
    fontFamily: 'Noto Sans KR',
    textDecoration: 'none',
    color: '#333',
    padding: '0px 19px',
  },
});

const Categories = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      {CATEGORIES.map((cat) => {
        return (
          <Link key={cat} to={'/shopping/' + cat} className={classes.link}>
            {cat + ' '}
          </Link>
        );
      })}
    </div>
  );
};

export default Categories;