"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { Palette, Settings } from "lucide-react"
import { RightSidebar } from "@/components/right-sidebar"

export function MobileDesignControls() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50 md:hidden">
      <Sheet open={isOpen} onOpenChange={setIsOpen}>
        <SheetTrigger asChild>
          <Button
            size="lg"
            className="rounded-full shadow-lg bg-primary text-primary-foreground hover:bg-primary/90 px-6 py-3 gap-2 border-2 border-background"
            onClick={() => setIsOpen(true)}
          >
            <Palette className="h-5 w-5" />
            Design Controls
          </Button>
        </SheetTrigger>
        <SheetContent side="bottom" className="h-[85vh] max-h-[85vh] overflow-hidden p-0">
          <div className="h-full flex flex-col">
            <SheetHeader className="px-6 py-4 border-b border-border flex-shrink-0">
              <SheetTitle className="flex items-center gap-2 text-left">
                <Settings className="h-5 w-5" />
                Design Controls
              </SheetTitle>
            </SheetHeader>
            <div className="flex-1 overflow-y-auto px-6 py-4">
              <RightSidebar />
            </div>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  )
}