import { Text, View } from "@react-pdf/renderer";

import { reportStyles } from "@/pdf/styles/report-styles";

interface ReportHeaderProps {
  reportTitle: string;
  reportId: string;
  generatedAt: string;
}

export function ReportHeader({
  reportTitle,
  reportId,
  generatedAt,
}: ReportHeaderProps) {
  return (
    <View>
      <Text style={reportStyles.smallCaps}>AlWirasah</Text>
      <Text
        style={{
          fontSize: 16,
          fontWeight: 700,
          color: "#0F4D3E",
          marginTop: 4,
        }}
      >
        Islamic Inheritance Distribution Report
      </Text>
      <Text style={{ marginTop: 5, fontSize: 11, color: "#2E5B50" }}>
        {reportTitle}
      </Text>
      <View style={{ marginTop: 10, flexDirection: "row" }}>
        <View style={{ marginRight: 18 }}>
          <Text style={reportStyles.smallCaps}>Generated On</Text>
          <Text style={{ marginTop: 2 }}>{generatedAt}</Text>
        </View>
        <View>
          <Text style={reportStyles.smallCaps}>Report ID</Text>
          <Text style={{ marginTop: 2 }}>{reportId}</Text>
        </View>
      </View>
    </View>
  );
}