import React, { useState } from 'react';
import { Save } from 'lucide-react';

const NotesEditor = () => {
    const [notes, setNotes] = useState('');
    const [lastSaved, setLastSaved] = useState(null);

    const handleSave = () => {
        // Mock save functionality
        console.log("Saving notes:", notes);
        setLastSaved(new Date());
    };

    return (
        <div className="h-full flex flex-col bg-white">
            <div className="border-b border-slate-200 px-6 py-3 flex items-center justify-between bg-slate-50">
                <h2 className="font-semibold text-slate-700">Project Notes</h2>
                <div className="flex items-center gap-3">
                    {lastSaved && (
                        <span className="text-xs text-slate-400">
                            Saved {lastSaved.toLocaleTimeString()}
                        </span>
                    )}
                    <button
                        onClick={handleSave}
                        className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors"
                    >
                        <Save size={16} /> Save
                    </button>
                </div>
            </div>
            <div className="flex-1 p-6 overflow-auto">
                <textarea
                    value={notes}
                    onChange={(e) => setNotes(e.target.value)}
                    placeholder="Start writing your research notes here..."
                    className="w-full h-full resize-none focus:outline-none text-slate-700 leading-relaxed text-lg placeholder:text-slate-300"
                />
            </div>
        </div>
    );
};

export default NotesEditor;