import { Mail } from '@/hooks/use-mail';

interface MailListProps {
  mails: Mail[];
  onMailClick: (mail: Mail) => void;
}

export const MailList = ({ mails, onMailClick }: MailListProps) => {
  return (
    <div className="flex flex-col space-y-2">
      {mails.map((mail) => (
        <div
          key={mail.id}
          className={`p-4 border rounded-lg cursor-pointer hover:bg-gray-50 ${
            !mail.read ? 'font-semibold' : ''
          }`}
          onClick={() => onMailClick(mail)}
        >
          <div className="flex justify-between items-start">
            <div className="flex-1">
              <div className="flex items-center space-x-2">
                <span className="text-sm text-gray-600">{mail.from}</span>
                {mail.starred && (
                  <span className="text-yellow-400">★</span>
                )}
              </div>
              <h3 className="text-lg font-medium">{mail.subject}</h3>
              <p className="text-sm text-gray-500 truncate">{mail.body}</p>
            </div>
            <span className="text-sm text-gray-400">{new Date(mail.date).toLocaleDateString()}</span>
          </div>
        </div>
      ))}
    </div>
  );
};