"use client";

import Link from "next/link";
import { CATEGORIES, slugifyCategory } from "./categories";

const categoryIcons: Record<string, string> = {
  Interior: "/categories/cat-interior.png",
  Tools: "/categories/cat-tools.png",
  Exterior: "/categories/cat-exterior.png",
  Drivetrain: "/categories/cat-drivetrain.png",
  Lighting: "/categories/cat-lighting.png",
  Suspension: "/categories/cat-suspension.png",
  Audio: "/categories/cat-audio.png",
  Performance: "/categories/cat-performance.png",
};

export default function MobileHeaderShrunk() {
  return (
    <header className="so-header so-header--mobile so-header--shrunk">
      <div className="container so-header__mobile">
        <div className="so-header__top">
          {/* Logo intentionally omitted for the shrunk header */}
        </div>

        <div className="so-header__categories">
          <nav className="so-header__nav so-header__nav--mobile">
            {CATEGORIES.map((c) => (
              <Link
                key={c}
                href={`/category/${slugifyCategory(c)}`}
                className="so-navitem"
                style={{
                  backgroundImage: `url(${categoryIcons[c] || ""})`,
                }}
              >
                <span className="so-navitem__label">{c}</span>
              </Link>
            ))}
          </nav>
          <div className="so-header__mobile-tools">
            <input
              className="so-header__search"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <Link href="/login" className="so-auth-icon" aria-label="Sign in">
              <span className="so-auth-icon__glyph" aria-hidden="true" />
            </Link>
          </div>
        </div>
      </div>
    </header>
  );
}