components/EmailDetail.js

import { Reply, Forward, Trash2, Archive, MoreVertical, Star, User } from 'lucide-react';

export default function EmailDetail({ email, onDelete }) {
  return (
    <div className="h-full flex flex-col">
      {/* Toolbar */}
      <div className="p-4 border-b border-slate-200 flex items-center justify-between shrink-0">
        <div className="flex items-center gap-4">
          <button className="p-2 hover:bg-slate-100 rounded-full text-slate-600">
            <Archive size={18} />
          </button>
          <button 
            onClick={onDelete}
            className="p-2 hover:bg-red-50 rounded-full text-slate-600 hover:text-red-500 transition-colors"
          >
            <Trash2 size={18} />
          </button>
          <div className="w-px h-6 bg-slate-200 mx-1" />
          <button className="p-2 hover:bg-slate-100 rounded-full text-slate-600">
            <Star size={18} />
          </button>
        </div>
        <div className="flex items-center gap-2">
          <button className="p-2 hover:bg-slate-100 rounded-full text-slate-600">
            <MoreVertical size={18} />
          </button>
        </div>
      </div>

      {/* Email Content */}
      <div className="flex-1 p-8 overflow-y-auto">
        <div className="max-w-3xl mx-auto">
          <h1 className="text-2xl font-semibold text-slate-800 mb-8">{email.subject}</h1>
          
          <div className="flex items-center justify-between mb-8">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center text-slate-600 font-bold">
                <User size={20} />
              </div>
              <div>
                <div className="font-medium text-slate-900">{email.sender}</div>
                <div className="text-xs text-slate-500">to me <span className="mx-1">·</span> {email.date}</div>
              </div>
            </div>
            <div className="flex gap-2">
              <span className="px-2 py-1 bg-slate-100 text-slate-600 text-xs rounded font-medium">
                {email.label}
              </span>
              <span className={`px-2 py-1 text-xs rounded font-medium ${
                email.priority === 'high' ? 'bg-red-100 text-red-600' : 
                email.priority === 'medium' ? 'bg-yellow-100 text-yellow-600' : 'bg-blue-100 text-blue-600'
              }`}>
                {email.priority} Priority
              </span>
            </div>
          </div>

          <div className="text-slate-700 leading-relaxed whitespace-pre-wrap mb-12">
            {email.body}
            <br /><br />
            Best regards,<br />
            The {email.sender} Team
          </div>

          {/* Action Buttons */}
          <div className="flex gap-3">
            <button className="flex items-center gap-2 px-6 py-2 border border-slate-300 rounded-full text-slate-600 hover:bg-slate-50 transition-colors font-medium">
              <Reply size={16} />
              Reply
            </button>
            <button className="flex items-center gap-2 px-6 py-2 border border-slate-300 rounded-full text-slate-600 hover:bg-slate-50 transition-colors font-medium">
              <Forward size={16} />
              Forward
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}