import type { ReactElement } from 'react'
import { Eye, Pencil, Sparkles } from 'lucide-react'

/**
 * 块右上角的一排图标按钮（普通块、属性表、库规则的卡片共用）：只放图标，名字写在悬停提示（title）和读屏用的 aria-label 里。
 * 「问 AI」：点开 / 收起块下面的问答区，展开时带按下的底色。
 * 「编辑 / 预览」切换：预览时是铅笔「编辑」，编辑时是眼睛「预览」、带按下的底色。
 */
export function BlockTools({ editing, onToggleEdit, asking, onToggleAsk }: {
  editing: boolean
  onToggleEdit: () => void
  /** 块下面的问答区展开着 */
  asking?: boolean
  /** 没给就不显示「问 AI」（文件不在工作区文件夹里，问答没地方存） */
  onToggleAsk?: () => void
}): ReactElement {
  const label = editing ? '预览' : '编辑'
  const Icon = editing ? Eye : Pencil
  return (
    <div className="flex h-5 shrink-0 items-center gap-0.5" role="group" aria-label="块操作">
      {onToggleAsk && (
        <button
          type="button"
          className="cr-tool flex h-5 w-6 items-center justify-center rounded"
          data-active={asking ? '' : undefined}
          title="问 AI"
          aria-label="问 AI"
          aria-expanded={asking === true}
          onClick={onToggleAsk}
        >
          <Sparkles size={14} strokeWidth={1.8} aria-hidden />
        </button>
      )}
      <button
        type="button"
        className="cr-tool flex h-5 w-6 items-center justify-center rounded"
        data-active={editing ? '' : undefined}
        title={label}
        aria-label={label}
        onClick={onToggleEdit}
      >
        <Icon size={14} strokeWidth={1.8} aria-hidden />
      </button>
    </div>
  )
}