"use client";

import React, { useState } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { cn } from '@/lib/utils';

interface CollapsibleSidebarProps {
  children: React.ReactNode;
  className?: string;
  initialExpanded?: boolean;
}

export function CollapsibleSidebar({ children, className, initialExpanded = true }: CollapsibleSidebarProps) {
  const [isExpanded, setIsExpanded] = useState(initialExpanded);

  return (
    <div 
      className={cn(
        "border-r bg-muted/30 transition-all duration-300 relative flex-shrink-0 group",
        isExpanded ? "w-52" : "w-3 hover:w-4 bg-muted/50 cursor-pointer",
        className
      )}
      onClick={(e) => {
        if (!isExpanded) setIsExpanded(true);
      }}
    >
      {/* Toggle Button */}
      {isExpanded && (
        <button
          onClick={(e) => {
            e.stopPropagation();
            setIsExpanded(false);
          }}
          className="absolute top-2 right-2 z-20 p-1 hover:bg-background/50 rounded-sm transition-colors"
          title="Collapse sidebar"
        >
          <ChevronLeft className="h-3.5 w-3.5 text-muted-foreground" />
        </button>
      )}

      {/* Content Container */}
      <div className={cn(
        "h-full overflow-y-auto p-3",
        isExpanded ? "opacity-100" : "opacity-0 pointer-events-none hidden"
      )}>
        {children}
      </div>
    </div>
  );
}