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

const TAKEOVER_ACTIONS = ['尝试接管', '立即跳过'] as const

interface BrowserTakeoverInteractionProps {
  disabled?: boolean
  browser_type?: string
  onSendMessage?: (content: string) => void
}

export const BrowserTakeoverInteraction = memo(
  ({ disabled, onSendMessage }: BrowserTakeoverInteractionProps) => {
    const [isClicked, setIsClicked] = useState(false)

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

    return (
      <InteractionButtons
        items={[...TAKEOVER_ACTIONS]}
        disabled={disabled}
        isClicked={isClicked}
        onClick={handleClick}
      />
    )
  },
)