import { type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { Check, ChevronLeft, Pencil, RotateCcw } from "lucide-react";
import { useScrollFade } from "../lib/useScrollFade";
// The shared floating side panel — one shell for the Feed / Plex / Playlists rails so they read
// as one system: a rounded glass card that floats beside the nav (aligned with the header top,
// not reaching the page bottom), with a header (title + active count + Customize/Reset) and a
// scrollable body whose native scrollbar is hidden and edges fade to hint more content. Collapses
// to a slim vertical tab docked at the nav's right (it's the flex sibling right after the nav).
export default function SidePanel({
title,
icon,
count = 0,
collapsed,
onToggleCollapse,
editing = false,
onToggleEditing,
onReset,
editHint,
actions,
children,
}: {
title: string;
icon: ReactNode;
count?: number;
collapsed: boolean;
onToggleCollapse: () => void;
// Customize (reorder/hide) mode — omit onToggleEditing to hide the pencil entirely.
editing?: boolean;
onToggleEditing?: () => void;
onReset?: () => void;
editHint?: string;
// Extra header controls shown when NOT editing (e.g. the feed's Clear all + Share view).
actions?: ReactNode;
children: ReactNode;
}) {
const { t } = useTranslation();
const fade = useScrollFade();
if (collapsed) {
return (
);
}
return (
);
}