
"use client";

import { BASE_WEB_URL } from "@/Config/Constant";
import { Link } from "@inertiajs/react";
import { Footer, FooterCopyright, FooterIcon, FooterLink, FooterLinkGroup, FooterTitle } from "flowbite-react";
import { useEffect, useState } from "react";
import { BsDribbble, BsFacebook, BsGithub, BsInstagram, BsTwitter } from "react-icons/bs";

export function WebsiteFooter() {
  const [aboutInfo, setAboutInfo] = useState({});
  useEffect(() => {
    fetch(BASE_WEB_URL + '/about-info')
      .then((res) => res.json())
      .then((data) => {
        setAboutInfo(data);
      })
      .catch((err) => {
        console.error("Error fetching users:", err);
      });
  }, []);
  return (
    <Footer className="bg-red-50">
      <div className="w-full">
        <div className="max-w-screen-lg mx-auto grid w-full grid-cols-2 gap-8 py-8 md:grid-cols-4">
          <div className="px-3">
            <a href="#" className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
              <img src="/logo.png" className="h-24" alt="Wensite Logo" />
            </a>
          </div>
          <div className="px-3">
            <FooterTitle title="Important links" />
            <FooterLinkGroup col>
              <Link href={'/'}>About</Link>
              <Link href={'/'}>Careers</Link>
              <Link href={'/'}>Community</Link>
              <Link href={'/'}>News</Link>
            </FooterLinkGroup>
          </div>
          <div className="px-3">
            <FooterTitle title="Contact" />
            <FooterLinkGroup col>
              <p>
                <span>Email: {aboutInfo?.email}</span> <br /><br />
                <span>Phone: {aboutInfo?.phone1}</span> <br /><br />
                <span>Address: {aboutInfo?.address}</span>
              </p>
            </FooterLinkGroup>
          </div>

        </div>
        <div className="bg-gray-700 dark:bg-gray-900 px-3">
          <div className="max-w-screen-lg mx-auto py-6 sm:flex sm:items-center sm:justify-between">
            <FooterCopyright href="#" by="Landbridge IC" year={2022} />
            <div className="mt-4 flex space-x-6 sm:mt-0 sm:justify-center">
              <FooterIcon href="#" icon={BsFacebook} />
              <FooterIcon href="#" icon={BsInstagram} />
              <FooterIcon href="#" icon={BsTwitter} />
            </div>
          </div>
        </div>
      </div>
    </Footer>
  );
}
