import type { CSSProperties, MouseEventHandler, ReactNode } from 'react'
import { twMerge } from 'tailwind-merge'

type TProperties = {
  children: ReactNode
  onClick: MouseEventHandler
  disabled?: boolean
  isActive?: boolean
  className?: string
  title: string
  style?: CSSProperties
}

export const EditorButton = (properties: TProperties) => {
  const { children, onClick, disabled, className, isActive, title, style } =
    properties

  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      className={twMerge(
        'flex h-6 w-8 items-center justify-center rounded-md text-xl hover:!bg-[#FCB017] disabled:cursor-not-allowed disabled:text-slate-400 disabled:opacity-50',
        isActive ? 'bg-[#FCB01755]' : '',
        className,
      )}
      style={style}
      title={title}
    >
      {children}
    </button>
  )
}
