"use client";

import * as React from "react";

import { cva, VariantProps } from "class-variance-authority";

import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";

import { cn } from "../../lib/utils";

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Root
      className={cn("grid gap-3", className)}
      {...props}
      ref={ref}
    />
  );
});
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;

const radioGroupItemVariants = cva(
  "aspect-square rounded-full bg-grayscale-surface hover:bg-grayscale-surface-hover focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-grayscale-border-hover focus-visible:data-[state=checked]:ring-primary-400 data-[state=checked]:bg-primary-500 hover:data-[state=checked]:bg-primary-600 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
  {
    variants: {
      size: {
        sm: "size-4",
        md: "size-6",
        lg: "size-8",
      },
      error: {
        true: "data-[state=unchecked]:border-[3px] border-error-surface-light hover:border-error-surface-dark",
        false: "",
      },
    },
    defaultVariants: {
      error: false,
      size: "md",
    },
  }
);

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> &
    VariantProps<typeof radioGroupItemVariants>
>(({ size = "md", error = false, className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(radioGroupItemVariants({ size, error }), className)}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center test">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          className={
            size === "sm"
              ? "size-2.5 bg-primary-50 rounded-full stroke-primary-50"
              : size === "md"
                ? "size-3 bg-primary-50 rounded-full stroke-primary-50"
                : "size-3.5 bg-primary-50 rounded-full stroke-primary-50"
          }
        >
          <circle cx="12" cy="12" r="10" fill="none" />
        </svg>
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  );
});
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;

export { RadioGroup, RadioGroupItem };
Components
