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

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

interface MailDisplayProps {
  mail: Mail | null;
}

export function MailDisplay({ mail }: MailDisplayProps) {
  if (!mail) {
    return (
      <div className="flex items-center justify-center h-full">
        <p className="text-gray-500">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 text-gray-700">
            {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 to ${mail.name}...`}
          className="w-full p-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500"
          rows={4}
        />
        <div className="flex justify-between items-center mt-4">
          <label className="flex items-center space-x-2 text-sm text-gray-700">
            <input type="checkbox" className="rounded text-blue-500" />
            <span>Mute this thread</span>
          </label>
          <button className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
            Send
          </button>
        </div>
      </div>
    </div>
  );
}