'use client'

import React from 'react'
import type { Editor } from '@tiptap/react'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

interface StyleMenuProps {
  editor: Editor | null
  disabled?: boolean
  executeCommand: (command: () => void) => void
}

export function StyleMenu({ editor, disabled, executeCommand }: StyleMenuProps) {
  if (!editor) return null
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild onMouseDown={e => e.preventDefault()}>
        <Button variant="outline" size="sm" className="h-8 px-2" disabled={disabled}>
          스타일
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuItem
          className="flex items-center"
          onSelect={() =>
            executeCommand(() =>
              editor
                .chain()
                .focus()
                .setMark('textStyle', { fontSize: '32px' })
                .setBold()
                .run()
            )
          }
        >
          제목 (굵게 + 32pt)
        </DropdownMenuItem>
        <DropdownMenuItem
          className="flex items-center"
          onSelect={() =>
            executeCommand(() =>
              editor
                .chain()
                .focus()
                .unsetBold()
                .setParagraph()
                .setMark('textStyle', { fontSize: null as unknown as string })
                .run()
            )
          }
        >
          본문 (기본)
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}