import { splitProps } from "solid-js"
import { Popover as PopoverPrimitive } from "@kobalte/core/popover"
import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive
const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = (props: import("solid-js").ComponentProps<typeof PopoverPrimitive.Content>) => {
    const [local, others] = splitProps(props, ["class"])
    return (
        <PopoverPrimitive.Portal>
            <PopoverPrimitive.Content
                class={cn(
                    "z-[200] w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
                    local.class
                )}
                {...others}
            />
        </PopoverPrimitive.Portal>
    )
}

export { Popover, PopoverTrigger, PopoverContent }