flatrender/src/components/templates/video/VideoTemplatesCategorySidebar.tsx

"use client";

import type { ComponentType } from "react";
import { useTranslations } from "next-intl";
import {
  Clapperboard,
  Gift,
  Images,
  LayoutGrid,
  Mail,
  Megaphone,
  Monitor,
  Music2,
  Play,
  Scissors,
  Share2,
  SlidersHorizontal,
  TrendingUp,
} from "lucide-react";

import {
  VideoTemplatesPremiumToggle,
  VideoTemplatesSizeSelect,
} from "@/components/templates/video/VideoTemplatesFilterControls";
import type { AspectRatioFilter, VideoSidebarCategoryId } from "@/lib/video-templates-catalog";
import { cn } from "@/lib/utils";

const SIDEBAR_CATEGORIES: {
  id: VideoSidebarCategoryId;
  labelKey: string;
  icon: ComponentType<{ className?: string }>;
  count?: number;
}[] = [
  { id: "all", labelKey: "categoryAll", icon: LayoutGrid },
  { id: "animation", labelKey: "categoryAnimation", icon: Play, count: 418 },
  { id: "intros", labelKey: "categoryIntros", icon: Clapperboard, count: 851 },
  { id: "editing", labelKey: "categoryEditing", icon: Scissors },
  { id: "invitation", labelKey: "categoryInvitation", icon: Mail },
  { id: "holiday", labelKey: "categoryHoliday", icon: Gift },
  { id: "slideshow", labelKey: "categorySlideshow", icon: Images },
  { id: "presentations", labelKey: "categoryPresentations", icon: Monitor },
  { id: "social", labelKey: "categorySocial", icon: Share2 },
  { id: "ads", labelKey: "categoryAds", icon: Megaphone },
  { id: "sales", labelKey: "categorySales", icon: TrendingUp },
  { id: "music", labelKey: "categoryMusic", icon: Music2 },
];

interface VideoTemplatesCategorySidebarProps {
  activeCategory: VideoSidebarCategoryId;
  onCategoryChange: (id: VideoSidebarCategoryId) => void;
  premiumOnly: boolean;
  onPremiumOnlyChange: (value: boolean) => void;
  aspectRatio: AspectRatioFilter;
  onAspectRatioChange: (value: AspectRatioFilter) => void;
  showFilters: boolean;
  onToggleFilters: () => void;
}

export function VideoTemplatesCategorySidebar({
  activeCategory,
  onCategoryChange,
  premiumOnly,
  onPremiumOnlyChange,
  aspectRatio,
  onAspectRatioChange,
  showFilters,
  onToggleFilters,
}: VideoTemplatesCategorySidebarProps) {
  const t = useTranslations("auto.componentsTemplatesVideoVideoTemplatesCategorySidebar");
  return (
    <nav aria-label={t("categoriesNavLabel")} className="sticky top-24">
      <ul className="space-y-0.5">
        {SIDEBAR_CATEGORIES.map((category) => {
          const Icon = category.icon;
          const isActive = activeCategory === category.id;
          return (
            <li key={category.id}>
              <button
                type="button"
                onClick={() => onCategoryChange(category.id)}
                className={cn(
                  "flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2",
                  isActive
                    ? "bg-blue-50 font-semibold text-blue-600"
                    : "text-gray-700 hover:bg-gray-50"
                )}
              >
                <Icon
                  className={cn(
                    "h-4 w-4 shrink-0",
                    isActive ? "text-blue-500" : "text-gray-500"
                  )}
                  aria-hidden
                />
                <span className="min-w-0 flex-1 truncate text-left">{t(category.labelKey)}</span>
                {category.count !== undefined ? (
                  <span className="ml-auto rounded bg-gray-100 px-1.5 py-0.5 text-[11px] text-gray-500">
                    {category.count}
                  </span>
                ) : null}
              </button>
            </li>
          );
        })}
      </ul>

      <div className="my-4 border-t border-gray-100" />

      <button
        type="button"
        onClick={onToggleFilters}
        aria-expanded={showFilters}
        className="flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
      >
        <SlidersHorizontal className="h-4 w-4 text-gray-500" aria-hidden />
        {t("filters")}
      </button>

      {showFilters ? (
        <div className="mt-3 space-y-4 rounded-lg border border-gray-100 bg-gray-50/50 p-3">
          <VideoTemplatesPremiumToggle
            checked={premiumOnly}
            onCheckedChange={onPremiumOnlyChange}
            switchId="premium-only-sidebar"
            className="justify-between"
          />
          <div className="space-y-1.5">
            <p className="text-xs font-medium text-gray-500">{t("sizeLabel")}</p>
            <VideoTemplatesSizeSelect
              value={aspectRatio}
              onValueChange={onAspectRatioChange}
              triggerClassName="w-full"
            />
          </div>
        </div>
      ) : null}
    </nav>
  );
}