"use client";

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

import { footerMenu } from "@/data";

const FooterMenu = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>((props, ref) => {
  const contactColumn = footerMenu.find((col) => col.id === 1);
  const otherColumns = footerMenu.filter((col) => col.id !== 1);

  const renderColumn = (column: (typeof footerMenu)[0]) => (
    <>
      <h3 className="text-white font-creato font-medium max-[600px]:text-lg text-2xl max-[600px]:pb-4 pb-6">
        {column.title}
      </h3>
      <ul className="flex flex-col max-[600px]:gap-4 gap-6">
        {column.items.map((item) => (
          <li key={item.id} className="flex items-center gap-2">
            {"icon" in item && item.icon && (
              <Image
                src={item.icon}
                alt={item.text}
                width={18}
                height={16}
                className="w-[18px] h-[18px]"
              />
            )}
            <Link
              className="text-white max-[600px]:text-sm text-base font-normal font-creato"
              href={item.link}
            >
              {item.text}{" "}
              {"highlight" in item && item.highlight && (
                <span className="text-cinnamon-satin">{item.highlight}</span>
              )}
            </Link>
          </li>
        ))}
      </ul>
    </>
  );

  return (
    <div ref={ref}>
      {/* Mobile layout: Contact full width, then Quick Links/Properties/Services in 2 columns */}
      <div className="max-[600px]:block md:hidden">
        {contactColumn && (
          <div className="mb-10">{renderColumn(contactColumn)}</div>
        )}
        <div className="grid grid-cols-2 gap-6">
          {otherColumns.map((column) => (
            <div key={column.id}>{renderColumn(column)}</div>
          ))}
        </div>
      </div>

      {/* Desktop layout: All 4 columns side by side */}
      <div className="hidden md:grid md:grid-cols-4 gap-10">
        {footerMenu.map((column, i) => (
          <div key={column.id} className={i > 0 ? "ml-14" : ""}>
            {renderColumn(column)}
          </div>
        ))}
      </div>
    </div>
  );
});

FooterMenu.displayName = "FooterMenu";

export default FooterMenu;