import React from "react";
import { Box, Typography, Container, Link, Grid } from "@mui/material";
import { VERSION } from "../version";

function Footer() {
  return (
    <Box
      component="footer"
      sx={{
        py: 1,
        borderTop: 1,
        borderColor: "divider",
        bgcolor: "background.paper",
        flexShrink: 0,
      }}
    >
      <Container maxWidth="xl">
        <Grid container spacing={2} alignItems="center">
          <Grid size={{ xs: 12, md: 6 }}>
            <Typography variant="body2" color="text.secondary">
              <strong>JMESPath Testing Tool</strong>{" "}
              {VERSION === "unknown" ? VERSION : `v${VERSION}`} - Created for
              testing and validating JMESPath expressions
            </Typography>
          </Grid>
          <Grid size={{ xs: 12, md: 6 }} sx={{ textAlign: { md: "right" } }}>
            <Typography variant="body2" color="text.secondary">
              Licensed under{" "}
              <Link
                href="https://opensource.org/licenses/MIT"
                target="_blank"
                rel="noopener noreferrer"
                color="primary"
                underline="hover"
                sx={{ fontWeight: 500 }}
              >
                MIT License
              </Link>{" "}
              |{" "}
              <Link
                href="https://jmespath.org/"
                target="_blank"
                rel="noopener noreferrer"
                color="primary"
                underline="hover"
                sx={{ ml: 1, fontWeight: 500 }}
              >
                Learn JMESPath
              </Link>
            </Typography>
          </Grid>
        </Grid>
      </Container>
    </Box>
  );
}

export default Footer;