import React from 'react';
import moment from 'moment';

interface Email {
    to?: string;
    subject?: string;
    body?: string;
    created_at?: string;
}

interface SharedEmailProps {
    email: Email;
}

export default function SharedEmail({ email }: SharedEmailProps) {
    const formatDate = (date?: string) => {
        return moment(date).format('ddd, DD/MMM/YYYY');
    };

    return (
        <div className="min-h-screen bg-white flex items-start justify-center p-5">
            <div className="w-full max-w-4xl mt-6">
                <div className="flex items-start justify-between mb-4">
                    <div>
                        <p className="mt-0">
                            <b>To : </b>
                            <span className="text-gray-500">{email?.to}</span>
                        </p>
                        <p className="mt-0">
                            <b>Subject : </b>
                            <span className="text-gray-500">{email?.subject || 'No Subject'}</span>
                        </p>
                    </div>
                    <small className="text-gray-500">{formatDate(email?.created_at)}</small>
                </div>

                <iframe
                    srcDoc={email?.body || 'No content available.'}
                    className="w-full border-0"
                    style={{ minHeight: '60vh' }}
                />
            </div>
        </div>
    );
}