import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

const Footer = ({ useTheme, footerLinksUrl, socialsUrl }) => {
  const { theme } = useTheme();
  const bgColorClass = theme === 'dark' ? 'bg-black' : 'bg-white';
  const textColorClass = theme === 'dark' ? 'text-white' : 'text-gray-900';

  const [siteFooterLinks, setSiteFooterLinks] = useState([]);
  const [socialLinks, setSocialLinks] = useState([]);

  useEffect(() => {
    // Fetching site footer links
    fetch(footerLinksUrl)
      .then(response => response.json())
      .then(data => setSiteFooterLinks(data))
      .catch(error => console.error('Error fetching footer links:', error));

    // Fetching social links
    fetch(socialsUrl)
      .then(response => response.json())
      .then(data => setSocialLinks(data))
      .catch(error => console.error('Error fetching social links:', error));
  }, [footerLinksUrl, socialsUrl]);

  return (
    <footer className={`${bgColorClass} ${textColorClass} p-10`} style={{ backgroundColor: 'var(--primary-color)', color: 'var(--text-dark)' }}>
      <a href="https://leumas.tech">
        <img src="https://res.cloudinary.com/dx25lltre/image/upload/v1707176122/Leumas/2_t6ap9y.svg" alt="Leumas Logo" className="h-12 w-12 mb-6" />
      </a>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 w-full mb-6">
        {siteFooterLinks.map((section, index) => (
          <div key={index}>
            <a href={section?.titleLink}>
              <h6 className={`footer-title mb-4 underline ${textColorClass}`}><strong>{section.title}</strong></h6>
            </a>
            {section.links.map((link, linkIndex) => (
              <Link key={linkIndex} to={link.href} className={`block mb-2 hover:underline hover:text-blue-400 ${textColorClass}`}>
                {link.name}
              </Link>
            ))}
          </div>
        ))}
      </div>

      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between mt-6 w-full">
        <p className={`mb-4 lg:mb-0 ${textColorClass}`}>© 2024 Leumas Tech. All rights reserved.</p>
        <div className="flex justify-center items-center lg:justify-end space-x-4  h-8">
          {socialLinks.map((link, index) => (
            <a key={index} href={link.href} className=" h-8 w-8 rounded-lg hoverEffect hover:text-blue-600 flex items-center justify-center overflow-hidden">
              <img src={link.svgPath} alt={link.name} className="w-full h-full" style={{ objectFit: 'cover' }} />
            </a>
          ))}
        </div>
      </div>
    </footer>
  );
};

export default Footer;