// components/website/WebsiteFooter.tsx
'use client';

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

interface SocialLink {
  _id: string;
  socialTitle: string;
  socialLink: string;
  socialIcon: string;
}

interface FooterData {
  headerLogo?: string;
  copyright?: string;
  title?: string;
}

interface WebsiteFooterProps {
  footerData?: FooterData;
  socialLinks?: SocialLink[];
}

export const WebsiteFooter = ({ footerData, socialLinks }: WebsiteFooterProps) => {
  return (
    <div className="w-full h-full py-8 sm:px-5 md:px-10 lg:px-5 2xl:px-0 px-5 text-black dark:text-white">
      <div className="w-full md:w-2xl lg:w-5xl mx-auto flex md:flex-row flex-col justify-start gap-3 md:justify-between items-start md:items-center">
        <Link href="/" className="w-24">
          <Image
            loading="lazy"
            width={500}
            height={500}
            quality={80}
            src={`${BASE_URL}/${footerData?.headerLogo}`}
            alt={footerData?.title || "Logo"}
            className="w-full text-black"
          />
        </Link>
        <div className="flex flex-col gap-1 text-[#262125] dark:text-black">
          <div className="flex md:flex-row flex-col gap-2 md:gap-8 items-center">
            <div className="grid grid-cols-2 md:flex items-center gap-x-8 md:gap-x-5">
              <Link href="/terms-and-conditions" className="text-[12px]  font-semibold leading-[22px] ">
                Terms & Conditions
              </Link>
              <Link href="/privacy-policy" className="text-[12px]  font-semibold leading-[22px] ">
                Privacy Policy
              </Link>
              <Link href="/about-us" className="text-[12px]  font-semibold leading-[22px] ">
                About Us
              </Link>
              <Link href="/support" className="text-[12px]  font-semibold leading-[22px] ">
                Support
              </Link>
              <Link href="/community-guidelines" className="text-[12px] font-semibold leading-[22px] ">
                Community Guidelines
              </Link>
              <Link href="/gdpr-policy" className="text-[12px]  font-semibold leading-[22px] ">
                GDPR Policy
              </Link>
            </div>
            <div className="flex gap-0.5 sm:gap-2 items-center md:my-0 my-2">
              {socialLinks?.map((social) => (
                <Link
                  href={social?.socialLink}
                  target="_blank"
                  rel="noopener noreferrer"
                  key={social?._id}
                  className="w-6 h-6 flex items-center justify-center border-[1px] border-gray-300 rounded-full"
                >
                  <Image
                    loading="lazy"
                    width={500}
                    height={500}
                    quality={80}
                    src={`${BASE_URL}/${social?.socialIcon}`}
                    alt={social?.socialTitle}
                    className="w-full"
                  />
                </Link>
              ))}
            </div>
          </div>
          <p className="text-[12px] text-[#262125] dark:text-black md:block hidden font-semibold leading-[22px] text-right mt-2">
            {footerData?.copyright}
          </p>
        </div>
        <p className="text-[12px] text-[#262125] dark:text-black  md:hidden block text-center font-semibold leading-[22px]">
          {footerData?.copyright}
        </p>
      </div>
    </div>
  );
};