"use client";

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

const styles = StyleSheet.create({
    section: { marginBottom: 24 },
    categoryBox: {
        marginBottom: 20,
        padding: 12,
        backgroundColor: COLORS.GRID,
        borderLeftWidth: 2,
        borderLeftColor: COLORS.DIVIDER,
    },
    categoryTitle: {
        fontSize: FONT_SIZES.TINY,
        fontWeight: "bold",
        color: COLORS.TEXT_LIGHT,
        textTransform: "uppercase",
        marginBottom: 10,
        letterSpacing: 1,
    },
    pageTitle: {
        fontSize: FONT_SIZES.LABEL,
        fontWeight: "bold",
        color: COLORS.CHARCOAL,
        marginBottom: 2,
    },
    pageDesc: {
        fontSize: FONT_SIZES.TINY,
        color: COLORS.TEXT_DIM,
        lineHeight: 1.4,
    },
});

export const SitemapModule = ({ state }: any) => (
    <>
        <DocumentTitle title="Informations-Architektur" isHero={true} />
        <PDFView style={styles.section}>
            {state.sitemap?.map((cat: any, i: number) => (
                <PDFView key={i} style={styles.categoryBox}>
                    <PDFText style={styles.categoryTitle}>{cat.category}</PDFText>
                    {cat.pages?.map((p: any, j: number) => (
                        <IndustrialListItem key={j}>
                            <PDFView style={{ marginBottom: 8 }}>
                                <PDFText style={styles.pageTitle}>{p.title}</PDFText>
                                <PDFText style={styles.pageDesc}>{p.desc}</PDFText>
                            </PDFView>
                        </IndustrialListItem>
                    ))}
                </PDFView>
            ))}
        </PDFView>
    </>
);
