import { Mail } from "@/types/mail";
import { Star, StarOff, Paperclip } from "lucide-react";
import { format } from "date-fns";

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

export function MailList({ mails, onMailClick }: MailListProps) {
  if (!mails || mails.length === 0) {
    return (
      <div className="flex items-center justify-center h-64">
        <p className="text-gray-500">No emails found</p>
      </div>
    );
  }

  return (
    <div className="flex-1 overflow-auto">
      {mails.map((mail) => (
        <div
          key={mail.id}
          className={`p-4 border-b cursor-pointer hover:bg-muted ${
            !mail.read ? "bg-muted/50" : ""
          }`}
          onClick={() => onMailClick(mail)}
        >
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              {mail.starred ? (
                <Star className="h-4 w-4 text-yellow-400" />
              ) : (
                <StarOff className="h-4 w-4 text-muted-foreground" />
              )}
              <span className="font-medium">{mail.from}</span>
            </div>
            <span className="text-sm text-muted-foreground">
              {format(new Date(mail.date), "MMM d, yyyy")}
            </span>
          </div>
          <div className="mt-2">
            <h3 className="font-medium">{mail.subject}</h3>
            <p className="text-sm text-muted-foreground line-clamp-2">
              {mail.body}
            </p>
          </div>
          {mail.attachments && mail.attachments.length > 0 && (
            <div className="mt-2 flex items-center text-sm text-muted-foreground">
              <Paperclip className="h-3 w-3 mr-1" />
              {mail.attachments.length} attachment
              {mail.attachments.length > 1 ? "s" : ""}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}