"use client"

import { X } from "lucide-react"
import { cn } from "@/lib/utils"
import Link from "next/link"

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

export default function MobileSidebar({ isOpen, onClose }: MobileSidebarProps) {
  return (
    <div
      className={cn(
        "fixed inset-0 z-40 transition-transform duration-300 md:hidden",
        isOpen ? "translate-x-0" : "translate-x-full",
      )}
      aria-hidden={!isOpen}
    >
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />

      {/* Drawer */}
      <aside className="relative ml-auto h-full w-64 bg-white shadow-lg">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b">
          <h2 className="text-lg font-semibold">导航</h2>
          <button onClick={onClose} aria-label="Close menu" className="rounded p-1 hover:bg-gray-100">
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Navigation links — keep in sync with Sidebar.tsx */}
        <nav className="flex flex-col gap-1 p-4">
          <Link href="/" className="rounded px-3 py-2 text-sm hover:bg-gray-100" onClick={onClose}>
            数据概览
          </Link>
          <Link href="/data-platform" className="rounded px-3 py-2 text-sm hover:bg-gray-100" onClick={onClose}>
            数据中台
          </Link>
          <Link href="/user-portrait" className="rounded px-3 py-2 text-sm hover:bg-gray-100" onClick={onClose}>
            用户画像
          </Link>
          <Link href="/ai-assistant" className="rounded px-3 py-2 text-sm hover:bg-gray-100" onClick={onClose}>
            AI 智能助手
          </Link>
        </nav>
      </aside>
    </div>
  )
}