"use client"

import * as React from "react"
import { Settings } from "lucide-react"

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

  return (
    <div className="relative inline-block text-left p-10">
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="inline-flex items-center gap-2 rounded-md border border-zinc-200 bg-white px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50 dark:hover:bg-zinc-800"
      >
        <Settings className="h-4 w-4" />
        <span>Settings</span>
      </button>

      {isOpen && (
        <>
            <div className="fixed inset-0 z-30" onClick={() => setIsOpen(false)} />
            <div className="absolute left-0 z-40 mt-2 w-72 rounded-md border border-zinc-200 bg-white p-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-zinc-800 dark:bg-zinc-950">
            <div className="space-y-4">
                <h4 className="font-medium text-zinc-900 dark:text-zinc-50">Dimensions</h4>
                <div className="grid grid-cols-3 items-center gap-4">
                <label className="text-sm text-zinc-500 dark:text-zinc-400">Width</label>
                <input
                    className="col-span-2 h-8 rounded-md border border-zinc-200 px-3 text-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50"
                    defaultValue="100%"
                />
                </div>
                <div className="grid grid-cols-3 items-center gap-4">
                <label className="text-sm text-zinc-500 dark:text-zinc-400">Height</label>
                <input
                    className="col-span-2 h-8 rounded-md border border-zinc-200 px-3 text-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50"
                    defaultValue="25px"
                />
                </div>
            </div>
            </div>
        </>
      )}
    </div>
  )
}