components/EmailList.js

import { Star, Archive, Trash2, Mail } from 'lucide-react';

export default function EmailList({ emails, selectedId, setSelectedId }) {
  return (
    <div className="w-full max-w-md bg-white border-r border-slate-200 flex flex-col shrink-0">
      <div className="p-4 border-b border-slate-100 flex items-center justify-between">
        <h2 className="font-semibold text-slate-700">Messages</h2>
        <div className="flex gap-1">
          <button className="p-1.5 hover:bg-slate-100 rounded text-slate-500">
            <Mail size={16} />
          </button>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto">
        {emails.length === 0 ? (
          <div className="p-8 text-center text-slate-400 text-sm">
            No messages found matching your search.
          </div>
        ) : (
          emails.map((email) => (
            <div 
              key={email.id}
              onClick={() => setSelectedId(email.id)}
              className={`group relative p-4 border-b border-slate-100 cursor-pointer transition-all ${
                selectedId === email.id 
                ? 'bg-blue-50 border-l-4 border-l-gmail-blue' 
                : 'hover:bg-slate-50 border-l-4 border-l-transparent'
              } ${!email.read ? 'bg-white font-bold' : 'bg-slate-50/30 font-normal'}`}
            >
              <div className="flex justify-between items-start mb-1">
                <span className={`text-sm ${!email.read ? 'text-slate-900' : 'text-slate-600'}`}>
                  {email.sender}
                </span>
                <span className="text-xs text-slate-400">{email.date}</span>
              </div>
              <div className={`text-sm truncate mb-1 ${!email.read ? 'text-slate-900' : 'text-slate-600'}`}>
                {email.subject}
              </div>
              <div className="text-xs text-slate-400 truncate">
                {email.body}
              </div>
              
              <div className="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 flex gap-1 transition-opacity">
                <button className="p-1.5 hover:bg-slate-200 rounded-full text-slate-500">
                  <Archive size={14} />
                </button>
                <button className="p-1.5 hover:bg-slate-200 rounded-full text-slate-500">
                  <Trash2 size={14} />
                </button>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}