import { Box, Container, Grid, Typography } from "@mui/material"
import { StaticImage } from "gatsby-plugin-image"
import React from "react"

const address={
  name: "Autonomic Co-operative Limited",
  line1: "1539 Pershore Road",
  city: "Birmingham",
  postcode: "B30 2JH",
  country: "United Kingdom"
}

const FooterText = ({ children, bold }) => {
  const normalStyle = { fontSize: 10, lineHeight: "14px" }
  const boldStyle = { fontSize: 14 }
  return <Typography sx={bold ? boldStyle : normalStyle}>{children}</Typography>
}

const Footer = () => (
  <Box
    component="footer"
    color="secondary.contrastText"
    bgcolor="secondary.main"
    py={5}
  >
    <Container maxWidth="lg">
      <Grid container>
        <Grid item xs={false} md={2} />
        <Grid item xs={12} md={6} container spacing={1}>
          <Grid item xs={12} md={2}>
            <StaticImage
              src="../images/autonomic-monster.png"
              alt="Autonomic monster logo"
              width={38}
            />
          </Grid>
          <Grid item xs={12} md={5}>
            <FooterText bold>{address.name}</FooterText>
            <FooterText>{address.line1}</FooterText>
            <FooterText>{address.city}</FooterText>
            <FooterText>{address.postcode}</FooterText>
            <FooterText>{address.country}</FooterText>
          </Grid>
          <Grid item xs={12} md={5}>
            <FooterText bold>
              We are a Co-operative Society registered with the FCA.
            </FooterText>
            <FooterText>Registration Number: 4597</FooterText>
            <FooterText bold>Member of the CoTech Network</FooterText>
          </Grid>
        </Grid>
      </Grid>
    </Container>
  </Box>
)

export default Footer