import { Icon } from "@iconify/react"
import { IconButton } from "@ivtui/base"

interface ToolbarButtonProps {
  onClick: () => void
  isActive?: boolean
  icon: string
  title?: string
  disabled?: boolean
}

export function ToolbarButton({
  onClick,
  isActive,
  icon,
  title,
  disabled,
}: React.PropsWithChildren<ToolbarButtonProps>) {
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault()
    event.stopPropagation()
    if (!disabled) {
      onClick()
    }
  }

  return (
    <IconButton
      variant={isActive ? "soft" : "ghost"}
      size={isActive ? "2" : "1"}
      onClick={handleClick}
      disabled={disabled}
      title={title}
      color={isActive ? "indigo" : "gray"}
      className={`${!isActive && "!m-0"}`}
    >
      <Icon icon={icon} className="size-6" />
    </IconButton>
  )
}