"use client";

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

export default function CategoryGrid() {
  return (
    <div className="section section--categories">
      <div className="container">
        <div className="section__header section__header--center">
          <h2>Shop by Category</h2>
        </div>
        <div className="grid-4">
          {CATEGORIES.map((c) => (
            <Link
              key={c}
              href={`/category/${slugifyCategory(c)}`}
              className="cat-card"
              aria-label={c}
              style={{
                backgroundImage: `url(/categories/cat-${slugifyCategory(c)}.png)`,
              }}
            >
              <div className="cat-card__overlay" />
              <div className="cat-card__label">{c}</div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}