import { Button } from '@headlessui/react'
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 cursor-pointer items-center justify-center rounded-md p-2 text-black hover:bg-[#2E2F7C] hover:text-white active:bg-[#2E2F7C]/50 disabled:cursor-not-allowed disabled:bg-[#2E2F7C]/50 disabled:text-white disabled:opacity-50',
        isActive ? 'bg-[#2E2F7C]/10' : '',
        className,
      )}
      style={style}
      title={title}
    >
      {children}
    </Button>
  )
}