import React from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import CardDish from "./CardDish";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: "#262626",
    color: "#bbbbbb",
    "& .MuiListItem-gutters": {
      padding: "2px"
    }
  },
  expandIcon: {
    color: "#bbbbbb",
  },
}));

export default function DishesCategory(props) {
  const classes = useStyles();
  const dishes = props.dishes;

  const dishCards = dishes.map((dish) => {
    return (
      <ListItem key={dish._id}>
        <CardDish hidePrice={props.hidePrice} dish={dish}></CardDish>
      </ListItem>
    );
  });

  return (
    <Accordion className={classes.root}>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
      >
        <h4>
          {props.name} <span>{props.price && `(${props.price}zł)`}</span>
        </h4>
      </AccordionSummary>
      <List>{dishCards}</List>
    </Accordion>
  );
}