import { ServerBar } from './ServerBar.tsx';
import { ChannelList } from './ChannelList.tsx';

interface MobileDrawerProps {
  isOpen: boolean;
  onClose: () => void;
}

export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
  if (!isOpen) return null;

  return (
    <div className="md:hidden fixed inset-0 z-50">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/50"
        onClick={onClose}
      />
      {/* Drawer */}
      <div className="absolute left-0 top-0 bottom-0 w-[280px] bg-gb-bg flex">
        {/* Server bar */}
        <div className="w-[48px] bg-gb-bg-h">
          <ServerBar />
        </div>
        {/* Channel list */}
        <div className="flex-1">
          <ChannelList />
        </div>
      </div>
      {/* Swipe hint */}
      <div className="absolute right-0 top-0 bottom-0 w-1 bg-gb-orange/20" />
    </div>
  );
}