import { footerItems } from "../../utils/data";
import TopFooterOneMenu from "./TopFooterOneMenu";

export interface TopFooterOneMenuProps {
  category: string;
  subItems: {
    text: string;
    href?: string;
  }[];
}

const TopFooterOne = () => {
  const footerListItems: TopFooterOneMenuProps[] = footerItems;

  return (
    <footer className="bg-[#f7f7f7] text-[#898B8B] border border-[#ececec] p-5">
      <div className="containerMode w-full flex flex-col gap-[1.875rem]">
        <h4 className="uppercase text-[1.3125rem] font-bold my-[.625rem] cursor-default">
          sitemap
        </h4>
        <div className="grid grid-cols-2 md:grid-cols-6 gap-2 md:gap-0">
          {footerListItems.map(({ category, subItems }, index) => (
            <TopFooterOneMenu
              key={`${category}-${index}`}
              category={category}
              subItems={subItems}
            />
          ))}
        </div>
      </div>
    </footer>
  );
};

export default TopFooterOne;