"use client";

import { useEffect, useState } from "react";
import axios from "axios";
import url from "../default/url";

////////////////////////////////////
import {
  FaFacebookF,
  FaTelegramPlane,
  FaTwitter,
  FaInstagram,
  FaGoogle,
} from "react-icons/fa";

const FooterNav = () => {
  return (
    <footer className="px-6 py-10 text-sm text-slate-300">
      <div className="mx-auto max-w-6xl">
        {/* Grid */}
        <div className="grid gap-10 grid-cols-2 md:grid-cols-3">
          
          {/* Navigation */}
          <div>
            <h3 className="mb-4 font-semibold text-white">
              Navigation
            </h3>
            <ul className="space-y-2">
              <a href="/terms"><li className="hover:text-white">Terms & Conditions</li></a>
              <a href="/disclaimer"><li className="hover:text-white">Disclaimer</li></a>
              <li className="hover:text-white">Livescore</li>
              <a href="/policy"><li className="hover:text-white">Policy</li></a>
            </ul>
          </div>

          {/* Information */}
          <div>
            <h3 className="mb-4 font-semibold text-white">
              Information
            </h3>
            <ul className="space-y-2">
              <a href="/about"><li className="hover:text-white">About Us</li></a>
              <a href="/contact"><li className="hover:text-white">Contact Us</li></a>
              <li className="hover:text-white">Brands</li>
              <li className="hover:text-white">Betting as</li>
            </ul>
          </div>

          {/* Contact Us */}
          <div className="col-span-2 md:col-span-1">
            <h3 className="mb-4 font-semibold text-white">
              Contact Us
            </h3>

            {/* Social Icons */}
            <div className="mb-4 flex items-center gap-4 text-lg text-white">
              <FaFacebookF className="cursor-pointer hover:text-green-300" />
              <FaTelegramPlane className="cursor-pointer hover:text-green-300" />
              <FaTwitter className="cursor-pointer hover:text-green-300" />
              <FaInstagram className="cursor-pointer hover:text-green-300" />
              <FaGoogle className="cursor-pointer hover:text-green-300" />
            </div>

            {/* Contact Info */}
            <div className="space-y-2">
              <p>
                Email Us:{" "}
                <span className="text-white">
                  info@JusticeTips.com.ng
                </span>
              </p>
              <p>
                Advert:{" "}
                <span className="text-white">
                  advert@JusticeTips.com.ng
                </span>
              </p>
              <p>
                Text a:{" "}
                <a
                  href="#"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-green-300 font-bold hover:underline"
                >
                  Contact us via telegram
                </a>
              </p>
            </div>
          </div>

        </div>
      </div>
    </footer>
  );
}

///////////////////////////////////
export default function Footer() {
  const [links, setLinks] = useState([]);

  useEffect(()=>{
    const getTextLink = async () => {
      try {
        const response = await axios.get(`${url()}/api/links/`);
            setLinks(response.data);
            // console.log("Fetched link: ", response.data);
      } catch (error) {
        console.log("Error while fetching Text link: ", error)
      }
    }
    getTextLink()
  },[])

  return (
    <footer className="w-full bg-green-900 text-white">
      <div className="max-w-6xl mx-auto flex flex-col items-center justify-center py-4 px-4">
        {/* Logo */}
        <div className="flex flex-col items-center">
          <img
            src="/images/logo.png"
            alt="Logo"
            className="h-[4rem] object-contain"
          />
        </div>
      </div>

      <FooterNav />

      {/* Text as */}
      <div className="bg-green-200/20 w-[90%] mx-auto rounded-lg p-2 mb-[2rem]">
        <p className="text-left text-white font-bold text-xs">Text as:</p>
        <div className="flex flex-wrap justify-start text-justify text-gray-50/80"> 
          {links.map((a, index) => (
            <a key={index} href={a.href} className="hover:underline text-xs mr-1">
              {a.name} |
            </a>
          ))}
        </div>
      </div>

      {/* Bottom bar */}
      <div className="text-center text-white/50 py-3 text-xs">
        © 2025 JUSTICEPREDIC. All rights reserved.
        <div>
          Developed by <a href={"https://wa.me/+2348059364783"}><span className="font-bold text-white hover:text-green-300">HUXFORGE</span></a>
        </div>
      </div>
    </footer>
  );
}
