"use client";

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

const styles = StyleSheet.create({
  section: { marginBottom: 24 },
  sectionTitle: {
    fontSize: FONT_SIZES.LABEL,
    fontWeight: "bold",
    marginBottom: 8,
    color: COLORS.CHARCOAL,
  },
  visionText: {
    fontSize: FONT_SIZES.BODY,
    color: COLORS.TEXT_MAIN,
    lineHeight: 1.4,
    textAlign: "justify",
  },
});

export const BriefingModule = ({ state }: any) => (
  <>
    <DocumentTitle title="Projektdetails" isHero={true} />
    {state.briefingSummary && (
      <PDFView style={styles.section}>
        <PDFText style={styles.sectionTitle}>Briefing Analyse</PDFText>
        <PDFText
          style={{
            fontSize: FONT_SIZES.BODY,
            color: COLORS.TEXT_MAIN,
            lineHeight: 1.6,
            textAlign: "justify",
          }}
        >
          {state.briefingSummary}
        </PDFText>
      </PDFView>
    )}
    {state.designVision && (
      <PDFView
        style={[
          styles.section,
          {
            padding: 12,
            borderLeftWidth: 2,
            borderLeftColor: COLORS.DIVIDER,
            backgroundColor: COLORS.GRID,
          },
        ]}
      >
        <PDFText
          style={[
            styles.sectionTitle,
            { color: COLORS.CHARCOAL, marginBottom: 4 },
          ]}
        >
          Strategische Vision
        </PDFText>
        <PDFText style={styles.visionText}>{state.designVision}</PDFText>
      </PDFView>
    )}
  </>
);
