"use client";

import clsx from "clsx";
import { useState } from "react";

const PARTNERS = [
  { label: "Aotearoa", partners: [] },
  { label: "International", partners: [] },
];

export default function Partners() {
  const [partner, setPartner] = useState(PARTNERS[0].label);

  return (
    <section className="bg-gray-100">
      <div className="container px-4 lg:px-24 py-8 lg:py-48 mx-auto lg:space-y-20">
        <h2 className="text-3xl lg:text-5xl leading-tight text-black">
          We&apos;ve worked with &hellip;
        </h2>

        <div className="flex gap-6 lg:gap-20 flex-col lg:flex-row text-black">
          <ul className="lg:border-t border-gray-500 lg:pr-8 pt-8 lg:space-y-4 flex lg:flex-col items-center lg:items-start gap-x-4">
            {PARTNERS.map((group) => (
              <li
                key={group.label}
                className={clsx(
                  "lg:space-y-4 text-xl lg:text-3xl flex items-center lg:gap-4 font-medium cursor-pointer",
                  group.label === partner && "text-accent-500"
                )}
                onClick={() => setPartner(group.label)}
              >
                {group.label}
                <div
                  className={clsx(
                    "size-3 bg-accent-500 rounded-full hidden lg:block",
                    group.label !== partner && "opacity-0"
                  )}
                ></div>
              </li>
            ))}
          </ul>
          <div className="pt-8 border-t border-gray-500 grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-12 flex-1 justify-items-stretch">
            {Array.from({ length: 12 }).map((_, index) => (
              <div
                key={index}
                className="bg-gray-400/50 h-auto aspect-video rounded shadow"
              ></div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}