import { memo } from 'react'
import { Button } from '@/components/ui/button'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

interface ButtonItem {
  label: string
  disabled?: boolean
  tooltip?: string
}

interface InteractionButtonsProps {
  items: Array<string | ButtonItem>
  disabled?: boolean
  isClicked?: boolean
  onClick: (label: string) => void
}

export const InteractionButtons = memo(
  ({ items, disabled, isClicked, onClick }: InteractionButtonsProps) => {
    if (!items?.length) return null

    return (
      <TooltipProvider>
        <div className="flex items-center flex-wrap gap-2 mt-2">
          {items.map((item, idx) => {
            const label = typeof item === 'string' ? item : item.label
            const btnDisabled = typeof item === 'string' ? false : !!item.disabled
            const tooltip = typeof item === 'string' ? undefined : item.tooltip

            const button = (
              <Button
                key={`${label}_${idx}`}
                variant="outline"
                size="sm"
                disabled={isClicked || disabled || btnDisabled}
                onClick={() => onClick(label)}
                className="h-auto cursor-pointer border-border bg-secondary/60 px-3 py-1.5 text-sm font-normal text-foreground hover:border-primary/40 hover:bg-accent hover:text-primary"
              >
                {label}
              </Button>
            )

            return tooltip ? (
              <Tooltip key={`${label}_${idx}`}>
                <TooltipTrigger asChild>{button}</TooltipTrigger>
                <TooltipContent>{tooltip}</TooltipContent>
              </Tooltip>
            ) : (
              button
            )
          })}
        </div>
      </TooltipProvider>
    )
  },
)