import type { ComponentProps } from 'react';
import { cx, cva, VariantProps } from 'class-variance-authority';
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';

import './inline-radio.css';

const inlineRadioGroupStyles = cva('c-inline-radio-group', {
  variants: {
    size: {
      xs: 'c-inline-radio-group-xs',
      sm: 'c-inline-radio-group-sm',
      md: 'c-inline-radio-group-md',
      lg: 'c-inline-radio-group-lg',
    },
  },
  defaultVariants: {
    size: 'sm',
  },
});

type InlineRadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root> &
  VariantProps<typeof inlineRadioGroupStyles>;

function InlineRadioGroup({ size, className, ...delegated }: InlineRadioGroupProps) {
  return <RadioGroupPrimitive.Root {...delegated} className={inlineRadioGroupStyles({ size, className })} />;
}

type InlineRadioItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;

function InlineRadioItem({ children, className, ...delegated }: InlineRadioItemProps) {
  return (
    <RadioGroupPrimitive.Item {...delegated} className={cx('c-inline-radio', className)}>
      <RadioGroupPrimitive.Indicator forceMount>{children}</RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  );
}

export const InlineRadio = {
  Group: InlineRadioGroup,
  Item: InlineRadioItem,
};
