import { Button, Tooltip } from '@/Components'
import RadixRadioGroup from '@/Components/Inputs/RadixRadioGroup'
import { IRadioGroupOptionProps, type ISelectOptionProps } from '@/Types'
import { InfoCircledIcon } from '@radix-ui/react-icons'
import React, { useState, type ReactElement } from 'react'

const SingleRadioGroup = ({ options }: { options: string[] }): ReactElement => {
  const [value, setValue] = useState<string | number | undefined>('red')
  return (
    <>  <p>{value ?? 'None'}</p>
      <RadixRadioGroup
        id='type'
        testId='type'
        options={options.map(option => {
          return {
            value: option,
            label: <>{option} <Tooltip useSpan={true} content="Info about this option"><Button size='sm' type='alert'><InfoCircledIcon /></Button></Tooltip></>
          }
        })}
        value='red'
        onChange={(v: IRadioGroupOptionProps | undefined) => { setValue(v?.value) }}
      />
    </>

  )
}

const RadioGroupDemo = (): ReactElement => {
  const options = [
    'red',
    'green',
    'blue'
  ]

  return (
    <div className='flex flex-col gap-8 m-8'>
      <SingleRadioGroup options={options} />
      <SingleRadioGroup options={options} />
      <SingleRadioGroup options={options} />
      <SingleRadioGroup options={options} />
    </div>
  )
}

export default RadioGroupDemo
