import { forwardRef } from "react";
import { cn } from "@/lib/utils";

export const Menu = forwardRef<
  React.ElementRef<"div">,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "relative inline-block text-left",
      className
    )}
    {...props}
  />
));

Menu.displayName = "Menu";

export const MenuButton = forwardRef<
  React.ElementRef<"button">,
  React.ButtonHTMLAttributes<HTMLButtonElement>
>(({ className, ...props }, ref) => (
  <button
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center w-full rounded-md border border-background/50 bg-background px-2 py-1 text-sm ring-offset-background file:border-0 file:text-primary-foreground file:font-medium ring-offset-shade focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-accent hover:bg-accent/5 disabled:pointer-events-none disabled:opacity-50",
      className
    )}
    {...props}
  />
));

MenuButton.displayName = "MenuButton";

export const MenuList = forwardRef<
  React.ElementRef<"div">,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "absolute right-0 z-50 mt-1 w-56 bg-background rounded-md shadow-lg ring-1 ring-border/50 ring-shade focus:outline-none",
      className
    )}
    {...props}
  />
));

MenuList.displayName = "MenuList";

export const MenuItem = forwardRef<
  React.ElementRef<"div">,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "flex w-full items-center justify-between rounded-md px-3 py-2 text-sm ring-offset-background ring-offset-shade ring-offset-1 hover:bg-accent hover:bg-accent/5 focus:bg-accent focus:bg-accent/20 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-inset disabled:pointer-events-none disabled:opacity-50",
      className
    )}
    {...props}
  />
));

MenuItem.displayName = "MenuItem";