import { FC } from "react";
import { Link } from "react-router-dom";
import { footerItems } from "../../utils/data";

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

const TopFooterOneMenu = (): FC => {
  return footerItems.map(
    ({ category, subItems }): TopFooterOneMenuProps => (
      <ul className="flex gap-2 flex-col">
        <li className="text-[.6875rem] font-bold text-[#5e2785] cursor-default">{category}</li>
        <ul className="flex flex-col gap-1">
          {subItems.map(({ href, text }) => (
            <Link to="#" className="text-[.6875rem] text-[#5e2785] hover:underline">
              {text}
            </Link>
          ))}
        </ul>
      </ul>
    )
  );
};

export default TopFooterOneMenu;
