import React from 'react';
import { cn } from '@/lib/utils';

export interface SidebarProps {
  title?: string;
  icon?: React.ReactNode;
  position?: 'left' | 'right';
  width?: string;
  collapsible?: boolean;
  children?: React.ReactNode;
  className?: string;
}

export const Sidebar: React.FC<SidebarProps> = ({
  title,
  icon,
  position = 'left',
  width = '280px',
  collapsible: _collapsible = false,
  children,
  className,
}) => {
  return (
    <aside
      className={cn(
        'flex flex-col border-border bg-card h-full shrink-0',
        position === 'left' ? 'border-r' : 'border-l',
        className,
      )}
      style={{ width }}
    >
      {title && (
        <div className="flex items-center gap-2 p-4 border-b border-border">
          {icon}
          <span className="font-semibold text-foreground text-sm">{title}</span>
        </div>
      )}
      <div className="flex-1 overflow-y-auto">{children}</div>
    </aside>
  );
};