'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
  onChange?: (newValue: string) => void
}

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

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

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

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