"use client";

import Image from "next/image";
import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
import FooterColumns from "@/components/shared/FooterColumns";
import { cls } from "@/lib/utils";
import type { FooterColumn } from "@/components/shared/FooterColumns";

interface FooterBaseProps {
  logoSrc?: string;
  logoText?: string;
  logoWidth?: number;
  logoHeight?: number;
  columns: FooterColumn[];
  copyrightText?: string;
  onPrivacyClick?: () => void;
  ariaLabel?: string;
  className?: string;
  containerClassName?: string;
  logoClassName?: string;
  logoTextClassName?: string;
  columnsClassName?: string;
  columnClassName?: string;
  columnTitleClassName?: string;
  columnItemClassName?: string;
  copyrightContainerClassName?: string;
  copyrightTextClassName?: string;
  privacyButtonClassName?: string;
}

const FooterBase = ({
  logoSrc = "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_37W3wTgpgMgpxIg0pfdv0bbM1Um/uploaded-1767006644424-js46jm0o.jpg",
  logoText = "Webild",
  logoWidth = 120,
  logoHeight = 40,
  columns,
  copyrightText = `© 2025 | Webild`,
  onPrivacyClick,
  ariaLabel = "Site footer",
  className = "",
  containerClassName = "",
  logoClassName = "",
  logoTextClassName = "",
  columnsClassName = "",
  columnClassName = "",
  columnTitleClassName = "",
  columnItemClassName = "",
  copyrightContainerClassName = "",
  copyrightTextClassName = "",
  privacyButtonClassName = "",
}: FooterBaseProps) => {
  return (
    <footer
      role="contentinfo"
      aria-label={ariaLabel}
      className={cls("relative overflow-hidden w-full primary-button text-background py-15", className)}
    >
      <div
        className={cls("relative w-content-width mx-auto z-10", containerClassName)}
      >
        <div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
          {logoSrc ? (
            <div className="flex-shrink-0">
              <Image
                src={logoSrc}
                alt="Logo"
                width={logoWidth}
                height={logoHeight}
                className={cls("object-contain", logoClassName)}
                unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
                aria-hidden={true}
              />
            </div>
          ) : (
            <h2 className={cls("text-4xl font-medium text-background", logoTextClassName)}>
              {logoText}
            </h2>
          )}

          <FooterColumns
            columns={columns}
            className={columnsClassName}
            columnClassName={columnClassName}
            columnTitleClassName={cls("text-background/50", columnTitleClassName)}
            columnItemClassName={cls("text-background", columnItemClassName)}
          />
        </div>

        <div
          className={cls("w-full flex items-center justify-between pt-9 border-t border-background/20", copyrightContainerClassName)}
        >
          <span className={cls("text-background/50 text-sm", copyrightTextClassName)}>
            {copyrightText}
          </span>
          <ButtonTextUnderline
            text="Privacy Policy"
            onClick={onPrivacyClick}
            className={cls("text-background/50", privacyButtonClassName)}
          />
        </div>
      </div>
    </footer>
  );
};

FooterBase.displayName = "FooterBase";

export default FooterBase;