import React, { useEffect } from "react";
import Paper from "@material-ui/core/Paper";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider";
import { makeStyles } from "@material-ui/core/styles";
import LogoMain from "./logoMain";

const useStyles = makeStyles((theme) => ({
  root: {
    textAlign: "center",
  },
  secondary: {
    "& .MuiListItemText-secondary": {
      color: "#7b7b7b",
      fontSize: "13px",
    },
    textAlign: "center",
  },
}));

export default function Contact() {
  useEffect(() => {
    document.title = "Menui - Kontakt";
  });
  const style = useStyles();
  return (
    <Paper style={{ backgroundColor: "#262626", color: "#bbbbbb", borderRadius: "24px" }}>
      <List className={style.root}>
        <ListItem>
          <LogoMain />
        </ListItem>
        <Divider />
        <ListItem>
          <ListItemText
            className={style.secondary}
            primary="Telefon"
            secondary="(+48) 533 270 853"
          />
        </ListItem>
        <Divider />
        <ListItem>
          <ListItemText
            className={style.secondary}
            primary="Email"
            secondary="menui@menui.pl"
          />
        </ListItem>
      </List>
    </Paper>
  );
}