// shadcn Toggle — Radix wrapper, token-styled. Building block for
// <ToggleGroup>; usable standalone as a 2-state press button (e.g.
// "Bold" / "Italic" formatting toggles).

import {
  forwardRef,
  type ComponentPropsWithoutRef,
  type ComponentRef,
} from 'react'
import * as RT from '@radix-ui/react-toggle'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '../cn'

export const toggleVariants = cva(
  // Base shared with shadcn's official toggle: same focus + disabled
  // + svg sizing tokens as <Button>.
  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium " +
  "transition-colors hover:bg-muted hover:text-muted-foreground " +
  "disabled:pointer-events-none disabled:opacity-50 " +
  "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground " +
  "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 " +
  "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring " +
  "cursor-pointer",
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-9 px-2 min-w-9',
        sm:      'h-8 px-2 min-w-8',
        lg:      'h-10 px-2.5 min-w-10',
      },
    },
    defaultVariants: { variant: 'default', size: 'default' },
  },
)

export const Toggle = forwardRef<
  ComponentRef<typeof RT.Root>,
  ComponentPropsWithoutRef<typeof RT.Root> & VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <RT.Root
    ref={ref}
    className={cn(toggleVariants({ variant, size, className }))}
    {...props}
  />
))
Toggle.displayName = 'Toggle'