import { useButtonClick } from "@/hooks/useButtonClick";
import ImageOrVideo from "@/components/ui/ImageOrVideo";

type FooterLink = {
  label: string;
  href?: string;
  onClick?: () => void;
};

type FooterColumn = {
  title: string;
  items: FooterLink[];
};

const FooterLinkItem = ({ label, href, onClick }: FooterLink) => {
  const handleClick = useButtonClick(href, onClick);

  return (
    <button
      onClick={handleClick}
      className="text-base text-primary-cta-text hover:opacity-75 transition-opacity cursor-pointer"
    >
      {label}
    </button>
  );
};

const FooterBottomLink = ({ label, href, onClick }: FooterLink) => {
  const handleClick = useButtonClick(href, onClick);

  return (
    <button
      onClick={handleClick}
      className="text-sm opacity-50 hover:opacity-75 transition-opacity cursor-pointer"
    >
      {label}
    </button>
  );
};

const FooterSimpleMedia = ({
  imageSrc,
  videoSrc,
  brand,
  columns,
  copyright,
  links,
}: ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never }) & {
  brand: string;
  columns: FooterColumn[];
  copyright: string;
  links: FooterLink[];
}) => {
  return (
    <footer data-section="footer" aria-label="Site footer" className="relative w-full mt-20 overflow-hidden">
      <div className="w-full aspect-square md:aspect-16/6 mask-fade-top-long">
        <ImageOrVideo
          imageSrc={imageSrc}
          videoSrc={videoSrc}
          className="w-full h-full object-cover rounded-none!"
        />
      </div>

      <div className="w-full py-15 primary-button text-primary-cta-text">
        <div className="w-content-width mx-auto">
          <div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
            <h2 className="text-4xl font-semibold">{brand}</h2>

            <div className="w-full md:w-fit flex flex-wrap gap-y-10 md:gap-12">
              {columns.map((column) => (
                <div key={column.title} className="w-1/2 md:w-auto flex flex-col items-start gap-3">
                  <h3 className="text-sm opacity-50 truncate">{column.title}</h3>
                  {column.items.map((item) => (
                    <FooterLinkItem key={item.label} label={item.label} href={item.href} onClick={item.onClick} />
                  ))}
                </div>
              ))}
            </div>
          </div>

          <div className="flex items-center justify-between pt-8 border-t border-primary-cta-text/20">
            <span className="text-sm opacity-50">{copyright}</span>
            <div className="flex items-center gap-3">
              {links.map((link) => (
                <FooterBottomLink key={link.label} label={link.label} href={link.href} onClick={link.onClick} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default FooterSimpleMedia;