"use client"

import { Label, RadioGroup } from "react-aria-components"
import { useController, useFormContext } from "react-hook-form"
import type { ReactNode } from "react"
import { Typography } from "../../../components/Typography"

interface PaymentOptionsGroupProps {
  name: string
  label?: string
  children: ReactNode
  className?: string
  initalValue?: string
  onChange?: (newValue: string) => void
}

export function PaymentOptionsGroup({
  name,
  label,
  children,
  className,
  onChange,
  initalValue,
}: PaymentOptionsGroupProps) {
  const { control } = useFormContext()

  const {
    field: { value, onChange: formOnChange },
  } = useController({
    name,
    control,
  })

  const handleChange = (newValue: string) => {
    formOnChange(newValue)
    onChange?.(newValue)
  }

  return (
    <RadioGroup
      value={initalValue || value}
      onChange={handleChange}
      className={className}
    >
      {label ? (
        <Typography variant="Title/Overline/sm">
          <Label>{label}</Label>
        </Typography>
      ) : null}
      {children}
    </RadioGroup>
  )
}