// shadcn ToggleGroup — Radix wrapper. Group of <Toggle>s sharing a
// single (`type="single"`) or multiple-selection (`type="multiple"`)
// state. Used in ProfileMenu for the inline theme + language chip
// rows; usable anywhere a small chip-radio is the right primitive.
//
// Variants + size flow down via React Context so individual items
// don't need to re-declare them — mirrors shadcn's reference.

import {
  createContext, forwardRef, useContext,
  type ComponentPropsWithoutRef,
  type ComponentRef,
} from 'react'
import * as RTG from '@radix-ui/react-toggle-group'
import { type VariantProps } from 'class-variance-authority'
import { cn } from '../cn'
import { toggleVariants } from './toggle'

type ToggleGroupVariants = VariantProps<typeof toggleVariants>

const ToggleGroupContext = createContext<ToggleGroupVariants>({
  variant: 'default', size: 'default',
})

export const ToggleGroup = forwardRef<
  ComponentRef<typeof RTG.Root>,
  ComponentPropsWithoutRef<typeof RTG.Root> & ToggleGroupVariants
>(({ className, variant, size, children, ...props }, ref) => (
  <RTG.Root
    ref={ref}
    className={cn('inline-flex items-center gap-1', className)}
    {...props}
  >
    <ToggleGroupContext.Provider value={{ variant, size }}>
      {children}
    </ToggleGroupContext.Provider>
  </RTG.Root>
))
ToggleGroup.displayName = 'ToggleGroup'

export const ToggleGroupItem = forwardRef<
  ComponentRef<typeof RTG.Item>,
  ComponentPropsWithoutRef<typeof RTG.Item> & ToggleGroupVariants
>(({ className, variant, size, children, ...props }, ref) => {
  const ctx = useContext(ToggleGroupContext)
  return (
    <RTG.Item
      ref={ref}
      className={cn(
        toggleVariants({
          variant: variant ?? ctx.variant,
          size:    size    ?? ctx.size,
        }),
        className,
      )}
      {...props}
    >
      {children}
    </RTG.Item>
  )
})
ToggleGroupItem.displayName = 'ToggleGroupItem'