"use client";

import * as React from "react";
import {
    View as PDFView,
    Text as PDFText,
    Image as PDFImage,
    StyleSheet,
} from "@react-pdf/renderer";
import { COLORS, FONT_SIZES } from "../SharedUI.js";

const styles = StyleSheet.create({
    titlePage: {
        flex: 1,
        padding: 60,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: COLORS.WHITE,
    },
    titleBrandIcon: {
        width: 80,
        height: 80,
        backgroundColor: COLORS.CHARCOAL,
        borderRadius: 16,
        alignItems: "center",
        justifyContent: "center",
        marginBottom: 40,
    },
    brandIconText: {
        fontSize: 40,
        color: COLORS.WHITE,
        fontWeight: "bold",
    },
    titleProjectName: {
        fontSize: FONT_SIZES.HERO,
        fontWeight: "bold",
        color: COLORS.CHARCOAL,
        marginBottom: 16,
        textAlign: "center",
        maxWidth: "85%",
        lineHeight: 1.2,
    },
    titleDate: {
        fontSize: FONT_SIZES.BODY,
        color: COLORS.TEXT_LIGHT,
        marginTop: 40,
    },
});

export const FrontPageModule = ({ state, headerIcon, date }: any) => {
    const fullTitle = `Digitale Webpräsenz für\n${state.companyName || "Ihr Projekt"}`;
    const fontSize = fullTitle.length > 60 ? 14 : fullTitle.length > 40 ? 18 : 22;

    return (
        <PDFView style={styles.titlePage}>
            <PDFView style={styles.titleBrandIcon}>
                {headerIcon ? (
                    <PDFImage src={headerIcon} style={{ width: 40, height: 40 }} />
                ) : (
                    <PDFText style={styles.brandIconText}>M</PDFText>
                )}
            </PDFView>
            <PDFText style={[styles.titleProjectName, { fontSize }]}>
                {fullTitle}
            </PDFText>
            <PDFView style={{ marginBottom: 40 }} />
            <PDFText style={styles.titleDate}>{date} | Marc Mintel</PDFText>
        </PDFView>
    );
};