import React from "react";
import FooterMiddleList from "./FooterMiddleList";

const FooterMiddle = () => {
  const listItems = [
    {
      title: "Who is TrailBlazer Supply?",
      id:"01",
      items: [
        { title: "About", id:"001", link: "about" },
        { title: "Testimonials", id:"002", link: "testimonials" },
        { title: "How to become a Christian", id:"003", link: "littleChrist" },
      ],
    },
    {
        title: "Support",
        id:"02",
        items: [
          { title: "Contact Support", id:"001", link: "support" },
          { title: "Chat", id:"002", link: "chat" },
          { title: "FAQs", id:"003", link: "faqs" },
        ],
      },
      {
        title: "Payment Products",
        id:"03",
        items: [
          { title: "Gift Cards", id:"001", link: "giftCards" },
          { title: "Points", id:"002", link: "points" },
          { title: "Store Card coming soon", id:"003", link: "storeCard" },
        ],
      },
      {
        title: "Other",
        id:"04",
        items: [
          { title: "Your Orders", id:"001", link: "orders" },
          { title: "Shipping Rates", id:"002", link: "shipping" },
          { title: "Privacy Policy", id:"003", link: "privacypolicy" },
          { title: "Terms and Conditions", id:"004", link: "Terms" }
        ],
      },
  ];
  return (
    <div className="w-full bg-darkBrown text-white">
      <div className="max-w-5xl mx-auto text-gray-300 py-5">
          <FooterMiddleList items={listItems} />
      </div>
    </div>
  );
};

export default FooterMiddle;
