'use client';

import { useState } from 'react';
import { ChevronLeft, ChevronRight, X } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';

interface MainContentProps {
  children: React.ReactNode;
  isMobile?: boolean;
  sidebarOpen?: boolean;
  onToggleSidebar?: () => void;
}

export function MainContent({
  children,
  isMobile = false,
  sidebarOpen = false,
  onToggleSidebar,
}: MainContentProps) {
  const [showMobileSidebar, setShowMobileSidebar] = useState(false);

  const handleToggleSidebar = () => {
    if (isMobile) {
      setShowMobileSidebar(!showMobileSidebar);
    } else {
      onToggleSidebar?.();
    }
  };

  if (isMobile) {
    return (
      <>
        {/* 移动端菜单按钮 */}
        <div className="flex items-center justify-between p-4 border-b bg-background">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setShowMobileSidebar(true)}
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>

        {/* 移动端侧边栏 */}
        <Sheet open={showMobileSidebar} onOpenChange={setShowMobileSidebar}>
          <SheetContent side="left" className="p-0 w-64">
            {/* 这里应该渲染LeftSidebar内容，但需要通过props传递 */}
            <div className="p-4">
              <p className="text-muted-foreground">侧边栏内容</p>
            </div>
          </SheetContent>
        </Sheet>

        {/* 主内容区域 */}
        <div className="flex-1 p-6 bg-background">
          {children}
        </div>
      </>
    );
  }

  return (
    <div className="flex-1 flex flex-col bg-background h-full">
      <div className="flex-1 p-6 min-h-0 content-container relative">
        {children}
      </div>
    </div>
  );
}