/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React from 'react';
import { HelpCircle } from 'lucide-react';

interface RichEditorStatusbarProps {
  stats: {
    words: number;
    chars: number;
    pages: number;
  };
  isFormatPainterActive: boolean;
}

export default function RichEditorStatusbar({
  stats,
  isFormatPainterActive
}: RichEditorStatusbarProps) {
  return (
    <footer className="h-9 bg-slate-800 text-slate-300 border-t border-slate-700 px-6 py-1.5 flex items-center justify-between text-xs print:hidden select-none z-10 shrink-0">
      <div className="flex items-center space-x-4">
        <span className="font-semibold">
          Halaman: <strong className="text-white">{stats.pages}</strong>
        </span>
        <span className="text-slate-500">|</span>
        <span>
          Kata: <strong className="text-white">{stats.words}</strong>
        </span>
        <span className="text-slate-500">|</span>
        <span>
          Karakter: <strong className="text-white">{stats.chars}</strong>
        </span>
      </div>
      <div className="flex items-center space-x-3">
        {isFormatPainterActive && (
          <span className="inline-flex items-center bg-amber-400/10 text-amber-400 px-2 py-0.5 rounded border border-amber-400/20 font-bold text-[10px] animate-pulse">
            🖌️ Sapu Format Aktif
          </span>
        )}
        <span className="text-slate-400 hidden sm:inline-flex items-center font-medium">
          <HelpCircle className="w-3.5 h-3.5 mr-1 text-slate-400" />
          Pintas: Ctrl+B (Tebal) | Ctrl+I (Miring) | Ctrl+U (Garis Bawah) | Tab (Indent)
        </span>
      </div>
    </footer>
  );
}