"use client";

import { Radio } from "@base-ui/react/radio";
import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";

import { cn } from "./cn";

/*
 * The primitive owns roving focus, arrow-key selection and the hidden native
 * inputs that make the group submit with a form.
 *
 * Selected uses the brand accent, matching Checkbox and Switch.
 */

export interface RadioGroupProps
  extends Omit<RadioGroupPrimitive.Props, "className"> {
  className?: string;
}

function RadioGroup({ className, ...props }: RadioGroupProps) {
    return (
      <RadioGroupPrimitive
        data-slot="radio-group"
        className={cn("grid gap-2", className)}
        {...props}
      />
    );
}

export interface RadioGroupItemProps
  extends Omit<Radio.Root.Props, "className"> {
  className?: string;
}

function RadioGroupItem({ className, ...props }: RadioGroupItemProps) {
    return (
      <Radio.Root
        data-slot="radio-group-item"
        className={cn(
          "relative flex shrink-0 items-center justify-center",
          "size-(--radio-size) rounded-full",
          "border border-(color:--color-border) bg-(color:--input-background)",
          "transition-colors duration-(--motion-duration) ease-(--motion-ease)",
          "outline-none focus-visible:outline-solid",
          "focus-visible:outline-(length:--focus-ring-width)",
          "focus-visible:outline-(color:--color-focus-ring)",
          "focus-visible:outline-offset-2",
          "data-checked:border-(color:--color-brand-accent)",
          "data-disabled:cursor-not-allowed data-disabled:opacity-50",
          className,
        )}
        {...props}
      >
        <Radio.Indicator className="flex items-center justify-center">
          <span className="size-2 rounded-full bg-(color:--color-brand-accent)" />
        </Radio.Indicator>
      </Radio.Root>
    );
}

export { RadioGroup, RadioGroupItem };