import { Typography, Link } from "@mui/joy";
import useLocalization from "~/utils/useLocalization";

const navTextSx = { typography: { xs: "body3", md: "body2" } };

export default function Footer() {
  const { localization } = useLocalization();
  return (
    <footer
      style={{
        position: "fixed",
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: "#ccc",
        height: 25,
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: "100%",
          padding: "0 10px",
        }}
      >
        <div>
          <Typography sx={navTextSx}>{localization.footer.credits}</Typography>
        </div>
        <div>
          <Link
            overlay
            target='_blank'
            href='https://renatocervati.com'
            textColor='inherit'
            underline='none'
            fontWeight='md'
          >
            <Typography sx={navTextSx}>renatocervati.com</Typography>
          </Link>

          {/* <ul style={{ display: 'flex', listStyle: 'none', margin: 0 }}>
            <li style={{ marginLeft: 20 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>
                <FontAwesomeIcon icon={['fab', 'facebook']} size="2x" />
              </a>
            </li>
            <li style={{ marginLeft: 20 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>
                <FontAwesomeIcon icon={['fab', 'twitter']} size="2x" />
              </a>
            </li>
            <li style={{ marginLeft: 20 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>
                <FontAwesomeIcon icon={['fab', 'instagram']} size="2x" />
              </a>
            </li>
          </ul> */}
        </div>
      </div>
    </footer>
  );
}