"use client";

import Link from "next/link";
import { CategoryIcon } from "@/components/shared/category-icon";
import { pickLocalizedText } from "@/lib/utils/i18n";
import { useLocale } from "@/providers/locale-provider";
import type { Category } from "@/types/domain";

export function CategorySidebar({
  categories,
  activeCategoryId,
  iconMode = "default",
}: {
  categories: Category[];
  activeCategoryId?: number;
  iconMode?: "default" | "compact";
}) {
  const isCompact = iconMode === "compact";
  const { locale } = useLocale();
  const isArabic = locale === "ar";

  return (
    <aside className="surface-card sidebar-scroll sticky top-24 p-3">
      <div className="mb-3 flex items-center justify-between border-b border-[var(--border)] pb-2">
        <h3 className="text-sm font-extrabold text-slate-900">{isArabic ? "التصنيفات" : "Categories"}</h3>
        <Link href="/categories" className="text-xs font-semibold text-[var(--primary)]">
          {isArabic ? "عرض الكل" : "View all"}
        </Link>
      </div>
      <div className="space-y-1.5">
        {categories.map((category) => {
          const active = activeCategoryId === category.id;
          return (
            <Link
              key={category.id}
              href={`/categories/${category.slug}`}
              className={`flex items-center justify-between rounded-xl border px-2.5 py-3 text-sm transition ${
                active
                  ? "border-[#b9cdff] bg-[#edf3ff] text-[var(--primary)]"
                  : "border-transparent bg-white text-slate-700 hover:border-[var(--border)]"
              }`}
            >
              <span className="truncate font-semibold">
                {pickLocalizedText(category, "name_ar", "name_en", locale, category.name_en || category.name_ar)}
              </span>
              <CategoryIcon
                image={category.icon || category.image}
                nameAr={category.name_ar}
                nameEn={category.name_en}
                iconSize={isCompact ? 28 : 60}
                containerClassName={isCompact ? "h-8 w-8 rounded-xl" : "h-16 w-16 rounded-2xl"}
                imageClassName={isCompact ? "h-6 w-6" : "h-14 w-14"}
                iconClassName={isCompact ? "h-6 w-6" : "h-14 w-14"}
              />
            </Link>
          );
        })}
      </div>
    </aside>
  );
}