brackt/app/components/DraftSidebar.tsx

import type { ReactNode } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "~/components/ui/button";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "~/components/ui/accordion";
import { cn } from "~/lib/utils";

interface DraftSidebarProps {
  collapsed: boolean;
  onCollapsedChange: (collapsed: boolean) => void;
  queueSection: ReactNode;
  recentPicksSection: ReactNode;
  className?: string;
}

export function DraftSidebar({
  collapsed,
  onCollapsedChange,
  queueSection,
  recentPicksSection,
  className,
}: DraftSidebarProps) {
  if (collapsed) {
    return (
      <div
        className={cn(
          "relative flex-shrink-0 bg-card border-r border-border transition-all duration-300 flex flex-col",
          "w-12 hidden lg:block", // Hide completely on mobile when collapsed
          className
        )}
      >
        <div className="flex-1" />
        {/* Expand button at bottom to match hide button position */}
        <div className="border-t border-border p-2 flex-shrink-0">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => onCollapsedChange(false)}
            className="w-full"
            aria-label="Expand sidebar"
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    );
  }

  return (
    <>
      {/* Mobile backdrop */}
      <div
        className="fixed inset-0 bg-black/50 z-40 lg:hidden"
        onClick={() => onCollapsedChange(true)}
        aria-label="Close sidebar"
      />

      <div
        className={cn(
          "relative flex-shrink-0 bg-card border-r border-border transition-all duration-300 flex flex-col",
          "w-[450px]",
          // Mobile: fixed overlay, Desktop: normal sidebar
          "fixed inset-y-0 left-0 z-50 lg:relative lg:z-auto",
          className
        )}
      >
        <Accordion
          type="multiple"
          defaultValue={["queue", "recent-picks"]}
          className="flex-1 overflow-hidden flex flex-col"
        >
          {/* Queue Section */}
          <AccordionItem value="queue" className="border-b flex-shrink-0">
            <AccordionTrigger className="px-4 py-3 hover:no-underline bg-muted/50 hover:bg-muted">
              <h2 className="font-semibold text-sm">My Queue</h2>
            </AccordionTrigger>
            <AccordionContent className="max-h-[35vh] overflow-y-auto pb-0">
              {queueSection}
            </AccordionContent>
          </AccordionItem>

          {/* Recent Picks Section */}
          <AccordionItem value="recent-picks" className="border-0 flex-1 overflow-hidden flex flex-col">
            <AccordionTrigger className="px-4 py-3 hover:no-underline bg-muted/50 hover:bg-muted flex-shrink-0">
              <h2 className="font-semibold text-sm">Recent Picks</h2>
            </AccordionTrigger>
            <AccordionContent className="pb-0 flex-1 overflow-y-auto">
              {recentPicksSection}
            </AccordionContent>
          </AccordionItem>
        </Accordion>

        {/* Collapse button at bottom */}
        <div className="border-t border-border p-2 flex-shrink-0">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => onCollapsedChange(true)}
            className="w-full flex items-center justify-center gap-2"
            aria-label="Collapse sidebar"
          >
            <ChevronLeft className="h-4 w-4" />
            <span className="text-sm">Hide Sidebar</span>
          </Button>
        </div>
      </div>
    </>
  );
}