import * as React from "react";
// @ts-ignore - Module types not available
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";

function ToggleGroup({
  className = "",
  ...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root>) {
  return (
    <ToggleGroupPrimitive.Root
      data-slot="toggle-group"
      className={`inline-flex items-center gap-1 rounded-md bg-muted p-1 ${className}`}
      {...props}
    />
  );
}

function ToggleGroupItem({
  className = "",
  ...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item>) {
  return (
    <ToggleGroupPrimitive.Item
      data-slot="toggle-group-item"
      className={`inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium
        text-muted-foreground transition-all outline-none
        hover:bg-background/60
        focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
        data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm
        disabled:pointer-events-none disabled:opacity-50
        ${className}`}
      {...props}
    />
  );
}

export { ToggleGroup, ToggleGroupItem };
