import React from "react";

const PrimeTabs = ({
  allCards,
  freeCards,
  soonCards,
}: {
  allCards: () => (JSX.Element | null)[];
  freeCards: () => (JSX.Element | null)[];
  soonCards: () => (JSX.Element | null)[];
}) => {
  return (
    <>
      <ul
        className="nav nav-tabs mb-4 flex list-none flex-wrap border-b-0 pl-0"
        id="tabs-tab"
        role="tablist"
      >
        <li
          className="red nav-item bg-red-100 text-red-100"
          role="presentation"
        >
          <a
            href="#tabs-home"
            className="
      active
      nav-link
      my-2
      block
      border-x-0
      border-t-0
      border-b-2 border-transparent px-6 py-3
      text-xs
      font-medium
      uppercase
      leading-tight hover:border-transparent
      hover:bg-gray-100
      focus:border-transparent
    "
            id="tabs-home-tab"
            data-bs-toggle="pill"
            data-bs-target="#tabs-home"
            role="tab"
            aria-controls="tabs-home"
            aria-selected="true"
          >
            All
          </a>
        </li>
        <li className="nav-item" role="presentation">
          <a
            href="#tabs-profile"
            className="
      nav-link
      my-2
      block
      border-x-0
      border-t-0
      border-b-2
      border-transparent px-6 py-3 text-xs
      font-medium
      uppercase
      leading-tight
      hover:border-transparent hover:bg-gray-100
      focus:border-transparent
    "
            id="tabs-profile-tab"
            data-bs-toggle="pill"
            data-bs-target="#tabs-profile"
            role="tab"
            aria-controls="tabs-profile"
            aria-selected="false"
          >
            Free Games
          </a>
        </li>
        <li className="nav-item" role="presentation">
          <a
            href="#tabs-messages"
            className="
      nav-link
      my-2
      block
      border-x-0
      border-t-0
      border-b-2
      border-transparent px-6 py-3 text-xs
      font-medium
      uppercase
      leading-tight
      hover:border-transparent hover:bg-gray-100
      focus:border-transparent
    "
            id="tabs-messages-tab"
            data-bs-toggle="pill"
            data-bs-target="#tabs-messages"
            role="tab"
            aria-controls="tabs-messages"
            aria-selected="false"
          >
            Ending Soon
          </a>
        </li>
        {/* <li className="nav-item" role="presentation">
          <a
            href="#tabs-contact"
            className="
      disabled
      nav-link
      pointer-events-none
      my-2
      block
      border-x-0
      border-t-0
      border-b-2
      border-transparent px-6 py-3 text-xs
      font-medium
      uppercase
      leading-tight
      hover:border-transparent hover:bg-gray-100
      focus:border-transparent
    "
            id="tabs-contact-tab"
            data-bs-toggle="pill"
            data-bs-target="#tabs-contact"
            role="tab"
            aria-controls="tabs-contact"
            aria-selected="false"
          >
            Contact
          </a>
        </li> */}
      </ul>
      <div className="tab-content" id="tabs-tabContent">
        <div
          className="tab-pane show active fade"
          id="tabs-home"
          role="tabpanel"
          aria-labelledby="tabs-home-tab"
        >
          {allCards()}
        </div>
        <div
          className="tab-pane fade"
          id="tabs-profile"
          role="tabpanel"
          aria-labelledby="tabs-profile-tab"
        >
          {freeCards()}
        </div>
        <div
          className="tab-pane show active fade"
          id="tabs-messages"
          role="tabpanel"
          aria-labelledby="tabs-profile-tab"
        >
          {soonCards()}
        </div>
      </div>
    </>
  );
};

export default PrimeTabs;