"use client";
import type { VariantProps } from "@karma/cva";
import { cva, cx } from "@karma/cva";
import * as TogglePrimitive from "@radix-ui/react-toggle";
import * as React from "react";

const toggleVariants = cva({
  base: "focus-visible:ring-ring data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium opacity-50 ring-offset-background transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:opacity-100",

  variants: {
    variant: {
      accent: "border-transparent bg-accent text-secondary hover:bg-accent",
      primary:
        "border-transparent bg-background text-primary hover:bg-background  data-[state=on]:text-secondary",
      outline:
        "border border-accent text-primary hover:bg-accent hover:text-secondary  data-[state=on]:text-secondary",
      muted: "border-transparent bg-muted text-secondary hover:bg-muted",
    },
    size: {
      medium: "h-10 px-3",
      small: "h-9 px-2.5",
      large: "h-11 px-5",
    },
  },
  defaultVariants: {
    variant: "accent",
    size: "medium",
  },
});

export type ToggleProps = React.ComponentPropsWithoutRef<
  typeof TogglePrimitive.Root
> &
  VariantProps<typeof toggleVariants>;

export const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  ToggleProps
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root
    ref={ref}
    className={cx(toggleVariants({ variant, size, className }))}
    {...props}
  />
));

Toggle.displayName = TogglePrimitive.Root.displayName;