import { ChevronRight, SlidersHorizontal } from "lucide-react";
import { useTranslation } from "react-i18next";

// The thin 46px rail shown when a filter sidebar is collapsed (both the feed Sidebar and the Plex
// PlexSidebar rendered byte-identical copies): an expand control + a filter icon carrying the
// active-filter count so you can tell filters are on without opening the panel.
export default function CollapsedFilterRail({
  activeCount,
  onToggleCollapse,
}: {
  activeCount: number;
  onToggleCollapse: () => void;
}) {
  const { t } = useTranslation();
  return (
    <aside className="hidden md:flex w-[46px] shrink-0 flex-col items-center gap-2 border-r border-border bg-surface/40 py-3">
      <button
        onClick={onToggleCollapse}
        title={t("sidebar.expandPanel")}
        aria-label={t("sidebar.expandPanel")}
        className="p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
      >
        <ChevronRight className="w-4 h-4" />
      </button>
      <button
        onClick={onToggleCollapse}
        title={t("sidebar.filters")}
        className="relative p-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"
      >
        <SlidersHorizontal className="w-5 h-5" />
        {activeCount > 0 && (
          <span className="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full bg-accent text-accent-fg text-[10px] font-bold leading-none grid place-items-center ring-2 ring-bg">
            {activeCount > 9 ? "9+" : activeCount}
          </span>
        )}
      </button>
    </aside>
  );
}
