import React from "react";
import { Button } from "../button";
import { FooterProps } from "./types";

import { Divider } from "@shared/components/divider";
import { Text } from "@shared/components/text";

export const Footer: React.FC<FooterProps> = ({
  body,
  links,
  bottomLinks,
  copyrights,
  terms,
  maxWidth = true,
  onClick,
}) => {
  function footerClick(
    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
  ): void {
    onClick?.(event);
  }

  return (
    <div className="component-container bg-bg-inverse text-white">
      <div className={` ${maxWidth ? "mx-auto max-w-120" : ""} px-5 py-8`}>
        <aside className="break-words" aria-label="Promotions and disclaimers">
          {body}
        </aside>
        <Divider className="my-8 border-border-inverse lg:my-16" />
        <div className="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          {links?.map((link: any, index: number) => (
            <React.Fragment key={`footer-link-group-${index}`}>
              <div key={`footer-link-group-${index}`}>
                <nav
                  aria-labelledby={`footer-${link?.title}`}
                  className="site-links-group"
                  key={`link-group-${index}`}
                >
                  <Text as="div" className="label3">
                    {link?.title}
                  </Text>
                  <ul className="flex flex-col">
                    {link?.items?.items?.map((site: any, _index: number) => (
                      <li className="pt-3" key={`site-links-${_index}`}>
                        <Button
                          {...site}
                          linkVariant="unstyled"
                          linkClassName="text-white body3 hover:underline underline-offset-4"
                          onClick={footerClick}
                        />
                      </li>
                    ))}
                  </ul>
                </nav>
              </div>
              <Divider className="border-border-inverse md:hidden" />
            </React.Fragment>
          ))}
        </div>

        <div className="py-8">
          <Divider className="my-8 hidden border-border-inverse md:my-8 md:block" />

          <p className="terms-text footnote text-white">
            &copy; {new Date().getFullYear()} {terms}
          </p>
          <p className="copy-rights whitespace-pre-line">{copyrights}</p>
          <nav aria-label="Footer legal">
            <ul className="bottom-links list-none">
              {bottomLinks?.map((link: any, index: number) => (
                <li
                  key={`links-${index}`}
                  className="relative float-left pl-[8px] before:absolute before:left-[3px] before:top-1/2 before:-translate-y-1/2 before:text-[14px] before:content-['•'] first-of-type:pl-0 first-of-type:before:content-['']"
                >
                  <Button
                    {...link}
                    linkClassName="footnote text-white hover:underline underline-offset-4"
                    linkVariant="unstyled"
                    onClick={footerClick}
                  />
                </li>
              ))}
            </ul>
          </nav>
        </div>
      </div>
    </div>
  );
};

export default Footer;