"use client";

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

type Category = {
  id: string;
  name: string;
  slug: string;
  imageUrl: string | null;
};

function getInitials(name: string) {
  return name
    .split(" ")
    .map((word) => word[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();
}

function CategoryIcon({ category }: { category: Category }) {
  const [imageFailed, setImageFailed] = useState(false);
  const showImage = category.imageUrl && !imageFailed;

  return (
    <div className="relative w-11 h-11 rounded-full overflow-hidden bg-sand border border-line group-hover:border-harbor group-hover:shadow-md group-hover:scale-105 transition-all duration-200">
      {showImage ? (
        <Image
          src={category.imageUrl as string}
          alt={category.name}
          fill
          className="object-cover"
          sizes="44px"
          onError={() => setImageFailed(true)}
        />
      ) : (
        <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-sand to-line/60">
          <span className="font-display font-semibold text-[13px] text-ink/70">
            {getInitials(category.name)}
          </span>
        </div>
      )}
    </div>
  );
}

export default function CategoryStrip({ categories }: { categories: Category[] }) {
  return (
    <section className="bg-white border-b border-line">
      <div className="max-w-7xl mx-auto px-4 py-4">
        <div className="flex gap-22 overflow-x-auto scrollbar-hide">
          {categories.map((category) => (
            <Link
              key={category.id}
              href={`/catalogue/${category.slug}`}
              className="group flex flex-col items-center gap-1.5 shrink-0 w-16"
            >
              <CategoryIcon category={category} />
              <span className="text-[12px] leading-tight text-center text-ink/90 group-hover:text-harbor transition-colors">
                {category.name}
              </span>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}