gbclient/src/mail/components/mail-list.tsx

import React from 'react';
import { formatDistanceToNow } from 'date-fns';

interface Mail {
  id: string;
  name: string;
  subject: string;
  email: string;
  date: string;
  text: string;
  read: boolean;
  labels: string[];
}

interface MailListProps {
  items: Mail[];
  selectedId?: string | null;
  onSelect: (id: string) => void;
}

export function MailList({ items, selectedId, onSelect }: MailListProps) {
  return (
    <div className="divide-y">
      {items.map((item) => (
        <div
          key={item.id}
          onClick={() => onSelect(item.id)}
          className={`p-3 cursor-pointer ${
            selectedId === item.id ? 'bg-gray-100' : ''
          } hover:bg-gray-50`}
        >
          <div className="flex justify-between items-start">
            <div className="flex items-center space-x-2">
              <div className={`w-2 h-2 rounded-full ${item.read ? 'bg-transparent' : 'bg-blue-500'}`} />
              <h3 className="font-medium text-sm">{item.name}</h3>
            </div>
            <span className="text-xs text-gray-500">
              {formatDistanceToNow(new Date(item.date), { addSuffix: true })}
            </span>
          </div>
          <h4 className="font-medium text-sm mt-1">{item.subject}</h4>
          <p className="text-xs text-gray-500 mt-1 truncate">
            {item.text.substring(0, 100)}...
          </p>
          {item.labels.length > 0 && (
            <div className="flex flex-wrap gap-1 mt-2">
              {item.labels.map((label) => (
                <span key={label} className="px-2 py-0.5 text-xs bg-gray-200 rounded-full">
                  {label}
                </span>
              ))}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}