"use client"

import * as React from "react"
import { X, Menu } from "lucide-react"

export default function Drawer() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <>
      <button
        onClick={() => setIsOpen(true)}
        className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white shadow hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90"
      >
        Open Drawer
      </button>

      {isOpen && (
        <div className="fixed inset-0 z-50 flex justify-end">
          <div 
             className="fixed inset-0 bg-zinc-950/50 backdrop-blur-sm transition-opacity" 
             onClick={() => setIsOpen(false)}
          />
          <div className="relative h-full w-full max-w-sm bg-white p-6 shadow-xl dark:bg-zinc-950 dark:border-l dark:border-zinc-800 transition-transform">
            <div className="flex items-center justify-between mb-8">
              <h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
                Menu
              </h3>
              <button
                onClick={() => setIsOpen(false)}
                className="rounded-md p-1 hover:bg-zinc-100 dark:hover:bg-zinc-800"
              >
                <X className="h-5 w-5 text-zinc-500 dark:text-zinc-400" />
              </button>
            </div>
            <nav className="space-y-4">
              {["Home", "Products", "About Us", "Contact", "Settings"].map((item) => (
                <a
                  key={item}
                  href="#"
                  className="block text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
                >
                  {item}
                </a>
              ))}
            </nav>
            <div className="absolute bottom-6 left-6 right-6">
              <button className="w-full rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white shadow hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90">
                Log out
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}