"use client";

import Link from "next/link";
import Image from "next/image";
import { useState } from "react";

export default function CategoryIndex({ items }: { items: { label: string; href: string; image: string }[] }) {
  const [active, setActive] = useState(0);
  return (
    <div className="wrap grid md:grid-cols-[1fr_minmax(260px,32%)] gap-10 py-16 md:py-28 items-start">
      <ul>
        {items.map((it, i) => (
          <li key={it.href + i} className="border-t border-sand last:border-b">
            <Link href={it.href} onMouseEnter={() => setActive(i)} onFocus={() => setActive(i)}
              className={`flex items-baseline justify-between font-display text-[44px] md:text-[84px] leading-[1.05] py-3 md:py-5 transition-colors duration-300 ${active === i ? "text-ink" : "text-ink/55 hover:text-ink"}`}>
              {it.label}<span className="nav-type hidden md:inline">Explore</span>
            </Link>
          </li>
        ))}
      </ul>
      <div className="hidden md:block sticky top-28 aspect-portrait bg-linen overflow-hidden" aria-hidden="true">
        {items.map((it, i) => it.image && (
          <Image key={i} src={it.image} alt="" fill sizes="30vw" className={`object-cover transition-opacity duration-500 ${active === i ? "opacity-100" : "opacity-0"}`} />
        ))}
      </div>
    </div>
  );
}