import React from "react";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import ListItem from "@material-ui/core/ListItem";
import FastfoodIcon from "@material-ui/icons/Fastfood";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiBadge-colorPrimary": {
      backgroundColor: "#13ff00",
    },
    "& .MuiBadge-colorError": {
      backgroundColor: "#ff0000",
    },
  },
  secondary: {
    "& .MuiListItemText-secondary": {
      color: "#7b7b7b",
      fontSize: "13px",
    },
  },
}));

export default function ListItemRestaurant(props) {
  const styles = useStyles();

  return (
    <ListItem
      button
      onClick={() => props.onClick(`/editRestaurant/${props.id}`)}
    >
      <ListItemIcon>
        <FastfoodIcon />
      </ListItemIcon>
      <ListItemText
        className={styles.secondary}
        primary={props.name}
      />
    </ListItem>
  );
}