import { Button } from '@admin/components/ui/button'
import { FileCode2 } from 'lucide-react'

export function ModeToggleButton({
  isSourceMode,
  onClick
}: {
  isSourceMode: boolean
  onClick: () => void
}) {
  const label = isSourceMode ? 'Show Rich Text' : 'Show Markdown'

  return (
    <Button
      type="button"
      variant="outline"
      size="sm"
      data-active-state={isSourceMode ? 'on' : 'off'}
      aria-pressed={isSourceMode}
      aria-label={label}
      title={label}
      onClick={onClick}
      className="min-w-40"
    >
      <FileCode2 />
      <span className="tiptap-button-text">{label}</span>
    </Button>
  )
}