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

export const ProjectWorkspace = ({ project, onSave, onBack, t }) => {
  return (
    <div className="max-w-4xl mx-auto space-y-6">
      <div className="flex items-center justify-between">
        <button onClick={onBack} className="flex items-center gap-2 text-slate-500 hover:text-emerald-700 transition">
          <ArrowRight className="w-4 h-4" /> عودة للمشاريع
        </button>
        <button onClick={() => onSave(project)} className="bg-emerald-800 text-white px-6 py-2 rounded-xl flex items-center gap-2 hover:bg-emerald-700 transition">
          <Save className="w-4 h-4" /> حفظ التعديلات
        </button>
      </div>

      <div className="bg-white rounded-3xl shadow-sm border border-slate-200 p-8 space-y-4">
        <input 
          className="text-3xl font-bold text-slate-900 w-full border-none focus:ring-0 placeholder:opacity-30"
          defaultValue={project?.name}
          placeholder="عنوان البحث..."
        />
        <textarea 
          className="w-full min-h-[400px] border-none focus:ring-0 text-lg leading-relaxed text-slate-700 font-serif resize-none"
          placeholder="ابدأ بكتابة مسودة بحثك هنا..."
          defaultValue={project?.description}
        />
      </div>
    </div>
  );
};