import React from "react";
import * as PopoverPrimitive from "@rn-primitives/popover";
import { cn } from "../utils/cn";
import { useColorScheme } from "nativewind";
import { Platform } from "react-native";

const Popover = PopoverPrimitive.Root;
const PopoverTrigger = PopoverPrimitive.Trigger;

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { className?: string }
>(({ className, sideOffset = 8, align = "start", side = "bottom", ...props }, ref) => {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Overlay />
      <PopoverPrimitive.Content
        ref={ref}
        sideOffset={sideOffset}
        align={align}
        side={side}
        className={cn(
          "z-50 w-72 rounded-lg border border-border dark:border-neutral-800 p-4",
          isDark ? "bg-neutral-900" : "bg-white",
          Platform.OS === "web" && "shadow-lg",
          className
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  );
});
PopoverContent.displayName = "PopoverContent";

export { Popover, PopoverTrigger, PopoverContent };