import React from 'react'
import { Undo2, Redo2, Save, Loader2 } from 'lucide-react'
import './FloatingToolbar.css'
import { SaveType } from '../html-editor/hooks/useEditState'

interface FloatingToolbarProps {
  canUndo: boolean
  canRedo: boolean
  onUndo: () => void
  onRedo: () => void
  onSave: () => void
  isSaving: boolean
  saveType: SaveType
}

export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
  canUndo,
  canRedo,
  onUndo,
  onRedo,
  onSave,
  isSaving,
  saveType,
}) => {
  return (
    <div className="ppt-floating-toolbar">
      {/* Undo / Redo */}
      <div className="ppt-floating-toolbar__history">
        <button
          type="button"
          className="ppt-floating-toolbar__btn"
          disabled={!canUndo}
          onClick={onUndo}
          title="Undo"
        >
          <Undo2 size={18} />
        </button>
        <button
          type="button"
          className="ppt-floating-toolbar__btn"
          disabled={!canRedo}
          onClick={onRedo}
          title="Redo"
        >
          <Redo2 size={18} />
        </button>
      </div>

      <div className="ppt-floating-toolbar__divider" />

      {/* Save area */}
      {isSaving && saveType === 'auto' ? (
        <div className="ppt-floating-toolbar__auto-saving">
          <Loader2 size={16} className="ppt-floating-toolbar__spinner" />
          <span>Auto-saving...</span>
        </div>
      ) : isSaving && saveType === 'manual' ? (
        <button
          type="button"
          className="ppt-floating-toolbar__save-btn ppt-floating-toolbar__save-btn--saving"
          disabled
        >
          <Loader2 size={16} className="ppt-floating-toolbar__spinner" />
          <span>Saving...</span>
        </button>
      ) : (
        <button
          type="button"
          className="ppt-floating-toolbar__save-btn"
          onClick={onSave}
        >
          <Save size={16} />
          <span>Save</span>
        </button>
      )}
    </div>
  )
}