"use client"

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

export default function Dialog() {
  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 Dialog
      </button>

      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
          <div 
             className="fixed inset-0 bg-zinc-950/50 backdrop-blur-sm transition-opacity" 
             onClick={() => setIsOpen(false)}
          />
          <div className="relative w-full max-w-lg overflow-hidden rounded-lg bg-white p-6 shadow-xl dark:bg-zinc-950 dark:border dark:border-zinc-800 transition-all sm:w-full">
            <div className="absolute right-4 top-4">
              <button
                onClick={() => setIsOpen(false)}
                className="rounded-md p-1 opacity-70 ring-offset-zinc-950 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none dark:focus:ring-zinc-300"
              >
                <X className="h-4 w-4" />
                <span className="sr-only">Close</span>
              </button>
            </div>
            <div className="sm:flex sm:items-start">
              <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                <h3 className="text-lg font-semibold leading-6 text-zinc-900 dark:text-zinc-50">
                  Edit Profile
                </h3>
                <div className="mt-2">
                  <p className="text-sm text-zinc-500 dark:text-zinc-400">
                    Make changes to your profile here. Click save when you're done.
                  </p>
                </div>
              </div>
            </div>
            <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse sm:gap-2">
              <button
                type="button"
                className="inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-zinc-900/90 sm:w-auto dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90"
                onClick={() => setIsOpen(false)}
              >
                Save Changes
              </button>
              <button
                type="button"
                className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 sm:mt-0 sm:w-auto dark:bg-zinc-950 dark:text-zinc-50 dark:ring-zinc-800 dark:hover:bg-zinc-800"
                onClick={() => setIsOpen(false)}
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}