'use client'

import type { Level } from '@admin/hooks/content-editor/use-heading'
import type { Editor } from '@tiptap/react'
import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
import { useHeading } from '@admin/hooks/content-editor/use-heading'

export function HeadingDropdownMenuItem({
  editor,
  level
}: {
  editor: Editor | null
  level: Level
}) {
  const { isVisible, canToggle, isActive, handleToggle, label, Icon } = useHeading({
    editor,
    level
  })

  if (!isVisible) {
    return null
  }

  return (
    <DropdownMenuItem
      data-active-state={isActive ? 'on' : 'off'}
      disabled={!canToggle}
      aria-label={label}
      title={label}
      onClick={() => handleToggle()}
    >
      <Icon />
      <span className="tiptap-button-text">{label}</span>
    </DropdownMenuItem>
  )
}