import { cx } from "@karma/cva";
import * as SelectPrimitive from "@radix-ui/react-select";
import * as React from "react";

export type SelectItemProps = React.ComponentPropsWithoutRef<
  typeof SelectPrimitive.Item
> & {
  variant?: "primary" | "accent" | "outline" | "muted";
  hideDefaultIndicator?: boolean;
};

export const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  SelectItemProps
>(
  (
    {
      className,
      hideDefaultIndicator = false,
      children,
      variant = "primary",
      ...props
    },
    ref,
  ) => (
    <SelectPrimitive.Item
      ref={ref}
      className={cx(
        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
        {
          "bg-accent text-secondary hover:bg-background hover:text-primary":
            variant === "accent",
          "bg-transparent text-secondary hover:bg-background hover:text-primary":
            variant === "primary",
          "border border-accent text-primary hover:bg-accent hover:text-background":
            variant === "outline",
          "hover:bg-muted/80 bg-muted text-secondary": variant === "muted",
        },
        "focus:bg-accent/90 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[state='checked']:text-primary data-[disabled]:opacity-50",
        className,
      )}
      {...props}
    >
      {!hideDefaultIndicator && (
        <SelectPrimitive.ItemIndicator className="absolute left-0 top-0 -z-10 h-full w-full bg-background" />
      )}
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  ),
);
SelectItem.displayName = SelectPrimitive.Item.displayName;