import { View, Text, StyleSheet } from "@react-pdf/renderer";
import { C, PAGE_H_PAD, PAGE_V_PAD, HEADER_H } from "../styles";

const s = StyleSheet.create({
  header: {
    position: "absolute",
    top: PAGE_V_PAD - HEADER_H - 4,
    left: PAGE_H_PAD,
    right: PAGE_H_PAD,
    height: HEADER_H,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    borderBottomWidth: 0.75,
    borderBottomColor: C.border,
    paddingBottom: 6,
  },
  mark: { fontSize: 10, fontFamily: "Helvetica-Bold", color: C.accent, letterSpacing: -0.3 },
  section: { fontSize: 8.5, color: C.muted, letterSpacing: 0.3 },
  brand: { fontSize: 8.5, color: C.muted, letterSpacing: 0.3, textAlign: "right", maxWidth: 160 },
});

interface Props {
  sectionName: string;
  brandName: string;
}

export function PageHeader({ sectionName, brandName }: Props) {
  return (
    <View fixed style={s.header}>
      <Text style={s.mark}>meSEO</Text>
      <Text style={s.section}>{sectionName}</Text>
      <Text style={s.brand}>{brandName}</Text>
    </View>
  );
}
