web/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.tsx

'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>
  )
}