import { FooterBlockDto } from "./FooterBlockUtils";
import SocialsVariantSimple from "../../shared/socials/SocialsVariantSimple";
import { useApp } from "../../../../../../hooks";
import Link from "next/link";

export  function FooterVariantSimple({ item }: { item: FooterBlockDto }) {
  
  return (
    <div>
      <footer>
        <div className="mx-auto max-w-7xl overflow-hidden px-4 py-12 sm:px-6 lg:px-8">
          {item.sections.map((section) => {
            return (
              <nav key={section.name} className="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
                {section.items.map((link) => {
                  return (
                    <div key={link.href} className="px-5 py-2">
                      <Link href={link.href} className="text-base text-gray-500 hover:text-gray-900 dark:hover:text-white">
                        {link.name}
                      </Link>
                    </div>
                  );
                })}
              </nav>
            );
          })}
          <div className="mt-4 flex justify-center space-x-6">
            <SocialsVariantSimple item={item.socials} />
          </div>
        </div>
      </footer>
    </div>
  );
}