import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import CheckIcon from "@material-ui/icons/Check";
import { List, ListItem, ListItemText, ListItemAvatar, Avatar} from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  card: {
    width: '100%',
    backgroundColor: '#f0f0f0',
    boxShadow: 'none',
    border: '1px solid #ccc',
  },
  bullet: {
    display: "inline-block",
    margin: "0 2px",
    verticalAlign: "top",
    fontSize: "10px"
  },
}));
const SideBarCard = ({ user, onLanguageSelect, lang, langCode }) => {
  const classes = useStyles();
  //TODO: this could be done better
  const fields = {
    label: lang.t("note.lable"),
    notes: [
      lang.t("note.note1"),
      lang.t("note.note2"),
      lang.t("note.note3"),
      lang.t("note.note4"),
    ],
  };

  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography variant="h6" component="h2">
          {fields.label}
        </Typography>
        <List>
          {fields.notes.map((el, index) => {
            return (
              <ListItem key={index} disableGutters>
                <ListItemAvatar style={{ flexShrink: 1 }}>
                  <Avatar style={{ background: '#fff', margin: 0 }}>
                    <CheckIcon style={{ fill: 'green', width: 20 }}/>
                  </Avatar>
                </ListItemAvatar>
                <ListItemText className="sidebarText">{el}</ListItemText>
              </ListItem>
            );
          })}
        </List>
      </CardContent>
    </Card>
  );
};
export default SideBarCard;