import React from "react";
import type { ComponentType } from "react";
import {
    Tailwind,
    Html,
    Body,
    Head,
    Container,
    Section,
    Row,
    Column,
    Img
} from "@react-email/components";
import { render as emailRender } from "@react-email/render";
import { asset } from "@/server/mailer/utils/asset";
import { config } from "@/config/env";

export const render = async <P = unknown>(
    Component: ComponentType<P>,
    props: P
): Promise<string> => {
    return emailRender(
        <Html>
            <Tailwind>
                <Head />

                <Body>
                    <Container>
                        <Section>
                            <Row align="center">
                                <Column align="center">
                                    <Img
                                      width={42}
                                      height={42}
                                      alt={config.app.name}
                                      src={asset("assets/logo.png")} />
                                </Column>
                            </Row>
                        </Section>

                        <Section>
                            <Component
                              key="component"
                              {...props as P} />
                        </Section>
                    </Container>
                </Body>
            </Tailwind>
        </Html>
    );
}
