import { memo, useState } from 'react'
import type { UserInteraction } from '../../../types'
import { InteractionButtons } from './InteractionButtons'

interface ChoiceInteractionProps {
  choice_options?: UserInteraction['choice_options']
  disabled?: boolean
  onSendMessage?: (content: string) => void
}

export const ChoiceInteraction = memo(
  ({ choice_options, disabled, onSendMessage }: ChoiceInteractionProps) => {
    const [isClicked, setIsClicked] = useState(false)

    const handleClick = (label: string) => {
      setIsClicked(true)
      onSendMessage?.(label)
    }

    if (!choice_options?.length) return null

    return (
      <InteractionButtons
        items={choice_options}
        disabled={disabled}
        isClicked={isClicked}
        onClick={handleClick}
      />
    )
  },
)