"use client";

import React, { useState, useEffect } from 'react';
import { Image, FileText } from 'lucide-react';

interface EditorProps {
  note?: {
    id: string;
    title: string;
    content: string;
  };
  onSave?: (note: { id: string; title: string; content: string }) => void;
}

export const Editor: React.FC<EditorProps> = ({ note, onSave }) => {
  const [title, setTitle] = useState(note?.title || '');
  const [content, setContent] = useState(note?.content || '');

  useEffect(() => {
    if (note) {
      setTitle(note.title);
      setContent(note.content);
    }
  }, [note]);

  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(e.target.value);
  };

  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setContent(e.target.value);
  };

  const handleSave = () => {
    if (note?.id) {
      onSave?.({
        id: note.id,
        title,
        content
      });
    }
  };

  return (
    <div className="flex flex-col h-full">
      {/* Title Bar */}
      <div className="p-4 border-b">
        <input
          type="text"
          value={title}
          onChange={handleTitleChange}
          placeholder="Note title"
          className="w-full text-xl font-semibold focus:outline-none bg-transparent"
        />
      </div>

      {/* Editor Area */}
      <div className="flex-1 p-4">
        <textarea
          value={content}
          onChange={handleContentChange}
          placeholder="Start writing..."
          className="w-full h-full resize-none focus:outline-none bg-transparent"
        />
      </div>

      {/* Toolbar */}
      <div className="p-4 border-t">
        <div className="flex space-x-2">
          <button 
            className="p-2 text-gray-500 hover:text-gray-700"
            onClick={handleSave}
          >
            <FileText className="h-5 w-5" />
          </button>
          <button className="p-2 text-gray-500 hover:text-gray-700">
            <Image className="h-5 w-5" />
          </button>
        </div>
      </div>
    </div>
  );
}; 