Test

import { useState } from 'react';
import { Download, RotateCcw, Copy, Check } from 'lucide-react';

export default function TextEditor() {
  const [text, setText] = useState('');
  const [copied, setCopied] = useState(false);
  const [fileName, setFileName] = useState('report.txt');

  const wordCount = text.trim().split(/\s+/).filter(word => word.length > 0).length;
  const charCount = text.length;

  const handleDownload = () => {
    const element = document.createElement('a');
    const file = new Blob([text], { type: 'text/plain' });
    element.href = URL.createObjectURL(file);
    element.download = fileName || 'report.txt';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  };

  const handleCopy = () => {
    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleReset = () => {
    if (text && window.confirm('Are you sure you want to clear all text? This cannot be undone.')) {
      setText('');
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="mb-6">
          <h1 className="text-4xl font-bold text-gray-800 mb-2">Report Writer</h1>
          <p className="text-gray-600">A simple, focused space for your writing</p>
        </div>

        {/* Toolbar */}
        <div className="bg-white rounded-lg shadow-md p-4 mb-4">
          <div className="flex flex-wrap gap-3 items-center">
            <input
              type="text"
              value={fileName}
              onChange={(e) => setFileName(e.target.value)}
              placeholder="Enter filename"
              className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            
            <button
              onClick={handleDownload}
              className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition"
            >
              <Download size={18} />
              Download
            </button>

            <button
              onClick={handleCopy}
              className="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded transition"
            >
              {copied ? <Check size={18} /> : <Copy size={18} />}
              {copied ? 'Copied!' : 'Copy'}
            </button>

            <button
              onClick={handleReset}
              className="flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition"
            >
              <RotateCcw size={18} />
              Clear
            </button>
          </div>
        </div>

        {/* Main Editor */}
        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="Start typing your report here..."
            className="w-full h-96 p-6 text-lg font-sans resize-none focus:outline-none border-none"
            spellCheck="true"
          />
        </div>

        {/* Stats */}
        <div className="bg-white rounded-lg shadow-md p-4 mt-4 flex gap-8">
          <div>
            <p className="text-gray-600 text-sm">Words</p>
            <p className="text-3xl font-bold text-blue-600">{wordCount}</p>
          </div>
          <div>
            <p className="text-gray-600 text-sm">Characters</p>
            <p className="text-3xl font-bold text-indigo-600">{charCount}</p>
          </div>
        </div>

        {/* Footer */}
        <div className="mt-6 text-center text-gray-600 text-sm">
          <p>Your work is only stored on your device during this session.</p>
        </div>
      </div>
    </div>
  );
}