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

import React, { useState } from 'react';
import { format } from 'date-fns';

interface Mail {
  id: string;
  name: string;
  subject: string;
  email: string;
  date: string;
  text: string;
}

interface MailDisplayProps {
  mail: Mail | null;
}

export function MailDisplay({ mail }: MailDisplayProps) {
  const [isPopoverVisible, setIsPopoverVisible] = useState(false);

  if (!mail) {
    return (
      <div className="flex items-center justify-center h-full">
        <p>No message selected</p>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center justify-between p-4 border-b">
        <div className="flex items-center space-x-4">
          <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
            {mail.name[0]}
          </div>
          <div>
            <h3 className="font-medium">{mail.name}</h3>
            <p className="text-sm text-gray-500">{mail.subject}</p>
            <p className="text-xs text-gray-500">Reply-To: {mail.email}</p>
          </div>
        </div>
        <span className="text-sm text-gray-500">
          {format(new Date(mail.date), 'MMM d, yyyy h:mm a')}
        </span>
      </div>

      <div className="flex-1 p-4 overflow-auto">
        <p className="whitespace-pre-line">{mail.text}</p>
      </div>

      <div className="p-4 border-t">
        <textarea
          placeholder={`Reply ${mail.name}...`}
          className="w-full p-2 border rounded"
          rows={4}
        />
        <div className="flex justify-between items-center mt-2">
          <label className="flex items-center space-x-2">
            <input type="checkbox" />
            <span className="text-sm">Mute this thread</span>
          </label>
          <button className="px-4 py-2 bg-blue-500 text-white rounded">
            Send
          </button>
        </div>
      </div>
    </div>
  );
}