"use client";
import { Container, Row, Col, Nav, NavLink } from "react-bootstrap";
import "./Footer.css";
import { useDispatch, useSelector } from "react-redux";
import {
  appSetup,
  getAllCategories,
  SocialLink,
} from "../../features/master/masterSlice";
import { useEffect } from "react";
import { usePathname, useRouter } from "next/navigation";
import Link from "next/link";

const Footer = () => {

  const category = useSelector((state) => state.master.categories);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAllCategories());
  }, [dispatch]);

  const sociallink = useSelector((state) => state?.master?.social_link);

  useEffect(() => {
    dispatch(SocialLink());
  }, [dispatch]);

  const app_setup = useSelector((state) => state.master.app_setup);
  const pathname = usePathname();

  return (
    <>
      <section className="Footer">
        <div className="container">
          <div className="row custom_row">
            <div className="col-lg-4 col-md-12 fist-c">
              <div className="fisrt_col">
                <div className="logo_holder">
                  <img
                    src={process.env.NEXT_PUBLIC_IMG_URL + app_setup?.logo}
                    className="logo_img"
                  />
                </div>
              </div>

              <p className="logo-bottom-text">
                We bring together thoughtfully selected pet products designed to
                make everyday pet care easier, healthier, and more joyful for
                you and your beloved companions.
              </p>
            </div>

            <div className="col-lg-2 col-sm-3  col-6">
              <div className="col_div">
                <p className="footer_section_title">Categories</p>

                <Nav className="flex-column">
                  {category?.slice(0, 7).map((item) => (
                    <Nav.Item key={item.id}>
                      <NavLink
                        as={Link}
                        href={`/shop?category_id=${item.id}`}
                        className="nav-link"
                      >
                        {item.name}
                      </NavLink>
                    </Nav.Item>
                  ))}
                </Nav>
              </div>
            </div>

            <div className="col-lg-3 col-sm-3 col-6 ">
              <div className="col_div">
                <p className="footer_section_title">Quick Links</p>

                <Nav className="flex-column">
                  <Nav.Item>
                    <NavLink
                      as={Link}
                      href="/"
                      className={pathname === "/" ? "active" : ""}
                    >
                      Home
                    </NavLink>
                  </Nav.Item>

                  <Nav.Item>
                    <NavLink as={Link} href="/shop">
                      Shop
                    </NavLink>
                  </Nav.Item>

                  <Nav.Item>
                    <NavLink as={Link} href="/about-us">
                      About Us
                    </NavLink>
                  </Nav.Item>

                  <Nav.Item>
                    <NavLink as={Link} href="/contact-us">
                      Contact Us
                    </NavLink>
                  </Nav.Item>

                  <Nav.Item>
                    <NavLink as={Link} href="/privacy-policy">
                      Privacy Policy
                    </NavLink>
                  </Nav.Item>

                  <Nav.Item>
                    <NavLink as={Link} href="/terms-conditions">
                      Terms & Conditions
                    </NavLink>
                  </Nav.Item>
                  <Nav.Item>
                    <NavLink as={Link} href="/faqs">
                      FAQ's
                    </NavLink>
                  </Nav.Item>
                </Nav>
              </div>
            </div>

            <div className="col-lg-3 col-sm-6  col-12">
              <div className="col_div">
                <p className="footer_section_title">Contact Us</p>

                <div className="footer_info_div">
                  <p className="info_text">
                    <span className="bold_text">Phone</span>
                    <br />
                    {app_setup?.contact_no}
                  </p>
                </div>

                <div className="footer_info_div">
                  <p className="info_text">
                    <span className="bold_text">Email</span>
                    <br />
                    {app_setup?.email}
                  </p>
                </div>

                <div className="footer_info_div">
                  <p className="info_text">
                    <span className="bold_text">Address</span>
                    <br />
                    {app_setup?.address}
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="footer_bottom">
            <div className="footer_bottom_left">
              © {new Date().getFullYear()} Ecommerce Single Vendor. All Rights Reserved.{" "}
              <Link href="https://profcymaglobal.com/" target="_blank">
                Developed by Profcyma
              </Link>
            </div>

            <div className="footer_bottom_right">
              {" "}
              <div className="icons_holder ">
                {sociallink?.map((item, index) => (
                  <div className="icon_div" key={index}>
                    <a
                      href={item?.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="img_holder"
                    >
                      <img
                        src={process.env.NEXT_PUBLIC_IMG_URL + item?.image}
                        className="icon_class"
                      />
                    </a>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Footer;
