import React, { useEffect, useState } from "react";
import {
  Textlink,
  FooterCol,
  CopyrightTxt,
  SocialIcons,
  useStyles,
} from "./style";
import { Box, Grid, Typography } from "@mui/material";
import { Link } from "@mui/material";
import FacebookIcon from "@mui/icons-material/Facebook";
import TwitterIcon from "@mui/icons-material/Twitter";
import InstagramIcon from "@mui/icons-material/Instagram";
import LinkedInIcon from "@mui/icons-material/LinkedIn";
import { apiClient } from "../common";
import { API_CDN_URL } from "@/utils/staticValues";

const FooterPage = () => {
  const { classes } = useStyles();
  const [load, setLoader] = useState<boolean>(false);
  const [footerOptions, setFooterOptions] = useState<any>([]);
  useEffect(() => {
    setLoader(true);
    FetchFooterOptions();
  }, []);

  const FetchFooterOptions = async () => {
    try{
          const res = await fetch (`${API_CDN_URL}/cache/getMenuList11.json`);
    const data = await res.json();
      setFooterOptions(data.data)
    } catch {
       let response = await apiClient("website_menu/getMenus_items/11", "get");
    if (response.status == 200) {
      setFooterOptions(response.data);
    }
    }

  };

  return (
    <Grid container spacing={3} className={classes.bgimage} pb={5}>
      <Grid item xs={12} sm={6} md={4}>
        <FooterCol>
          <Textlink href="/">
            <img className="ComLogo" src="/assets/logo2.svg" alt="logo" />
          </Textlink>
          <Typography>
            Power Cozmo Our company's founders & CEO are electrical and
            mechanical engineers and businessman
          </Typography>
          <Typography>
            <Textlink>
              {load && (
                <Textlink href="mailto:info@powercozmo.com">
                  info@powercozmo.com
                </Textlink>
              )}
            </Textlink>
          </Typography>
        </FooterCol>
      </Grid>
      <Grid item xs={12} sm={6} md={3}>
        <FooterCol>
          <Typography variant="h5" className={classes.footerlinks}>
            Quick Links
          </Typography>
          <Box className={classes.borderr}></Box>
          <Typography>
            <Textlink href="/about-us">About Us</Textlink>
          </Typography>
          <Typography>
            <Textlink href="/productlist">Our Products</Textlink>
          </Typography>
          <Typography>
            <Textlink href="/contact-us">Contact Us</Textlink>
          </Typography>
        </FooterCol>
      </Grid>
      <Grid item xs={12} sm={6} md={3}>
        <FooterCol>
          <Typography variant="h5" className={classes.footerlinks}>
            Main Products
          </Typography>
          <Box className={classes.borderr}></Box>
          {footerOptions.map((v) => (
            <Typography key={v.id}>
              <Textlink href={v.link}>{v.label}</Textlink>
            </Typography>
          ))}
        </FooterCol>
      </Grid>
      <Grid item xs={12} sm={6} md={2}>
        <FooterCol>
          <Typography variant="h5" className={classes.footerlinks}>
            Follow Us
          </Typography>
          <Box className={classes.borderr}></Box>
          <SocialIcons display="flex" sx={{ mt: 3 }}>
            <Link
              href="https://www.facebook.com/powercozmo.epg"
              target="_blank"
            >
              <FacebookIcon></FacebookIcon>
            </Link>
            <Link href="https://twitter.com/powercozmo" target="_blank">
              <TwitterIcon></TwitterIcon>
            </Link>
            <Link
              href="https://www.linkedin.com/company/powercozmo"
              target="_blank"
            >
              <LinkedInIcon></LinkedInIcon>
            </Link>
            <Link href="https://www.instagram.com/powercozmo/" target="_blank">
              <InstagramIcon></InstagramIcon>
            </Link>
          </SocialIcons>
        </FooterCol>
      </Grid>
      <Grid item xs={12}>
        <CopyrightTxt>
          <Typography className={classes.footertxt}>
            © 2024 Power Cozmo - All rights reserved.
          </Typography>
        </CopyrightTxt>
      </Grid>
    </Grid>
  );
};
export default FooterPage;