"use client"

import * as React from "react"
import { Check, ChevronDown } from "lucide-react"
import { cn } from "@/lib/utils"

export default function Select() {
  const [isOpen, setIsOpen] = React.useState(false)
  const [selectedValue, setSelectedValue] = React.useState("Apple")
  const options = ["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]

  return (
    <div className="relative w-full max-w-[200px]">
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="flex h-9 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-zinc-400 focus:outline-none focus:ring-1 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus:ring-zinc-300"
      >
        <span>{selectedValue}</span>
        <ChevronDown className="h-4 w-4 opacity-50" />
      </button>
      {isOpen && (
        <>
          <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
          <div className="absolute top-full z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-zinc-200 bg-white shadow-md dark:border-zinc-800 dark:bg-zinc-950">
            <div className="p-1">
              {options.map((option) => (
                <div
                  key={option}
                  onClick={() => {
                    setSelectedValue(option)
                    setIsOpen(false)
                  }}
                  className={cn(
                    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-zinc-100 dark:hover:bg-zinc-800",
                    selectedValue === option ? "text-zinc-900 dark:text-zinc-50" : "text-zinc-500 dark:text-zinc-400"
                  )}
                >
                  <span className={cn("absolute left-2 flex h-3.5 w-3.5 items-center justify-center", selectedValue === option ? "opacity-100" : "opacity-0")}>
                    <Check className="h-4 w-4" />
                  </span>
                  <span>{option}</span>
                </div>
              ))}
            </div>
          </div>
        </>
      )}
    </div>
  )
}