import * as React from 'react';
import { brandColours } from '../utilities/helpers';

interface InviteEmailProperties {
    playerName: string;
    inviteCode: string;
}

export const InviteEmail = (props: InviteEmailProperties) => (
    <div
        style={{
            width: '100%',
            height: '100%',
            background: brandColours.light,
        }}
    >
        <table
            width="100%"
            border={0}
            cellSpacing={0}
            cellPadding={0}
        >
            <tbody>
                <tr>
                    <td align="center">
                        <div
                            style={{
                                padding: '20px',
                                borderRadius: '20px',
                                background: brandColours.white,
                                margin: '50px',
                                color: brandColours.dark,
                                maxWidth: '450px',
                            }}
                        >
                            <h1>You're in, {props.playerName}!</h1>
                            <p>
                                You've been invited to join {process.env.PRODUCT_NAME}, please click the button below to
                                finish signing up.
                            </p>
                            <p
                                style={{
                                    marginBottom: '40px',
                                }}
                            >
                                <a
                                    style={{
                                        display: 'inline-block',
                                        padding: '10px 20px',
                                        borderRadius: '5px',
                                        background: brandColours.primary,
                                        textDecoration: 'none',
                                        color: brandColours.light,
                                        fontSize: '20px',
                                        fontWeight: 'bold',
                                    }}
                                    href={`${process.env.ROOT_URL}/invitation/${props.inviteCode}`}
                                >
                                    Join {process.env.PRODUCT_NAME}
                                </a>
                            </p>
                            <p
                                style={{
                                    fontSize: '0.8rem',
                                    opacity: '80%',
                                }}
                            >
                                If above button does not work, copy the link below into a new browser tab:
                                <br />
                                {`${process.env.ROOT_URL}/invitation/${props.inviteCode}`}
                            </p>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
);