import * as React from 'react';
import { Image, Text, View } from '@react-pdf/renderer';

import { styles } from '../styles';

export function Header(props: { title: string; logoDataUrl?: string | null; qrDataUrl?: string | null; isHero?: boolean }): React.ReactElement {
  const { isHero = false } = props;
  
  return (
    <View style={isHero ? styles.header : [styles.header, { paddingHorizontal: 0, backgroundColor: 'transparent', borderBottomWidth: 0, marginBottom: 24, paddingTop: 40 }]}>
      <View style={styles.headerLeft}>
        {props.logoDataUrl ? (
          <Image src={props.logoDataUrl} style={styles.logo} />
        ) : (
          <Text style={styles.brandFallback}>KLZ</Text>
        )}
      </View>
      <View style={styles.headerRight}>
        <Text style={styles.headerTitle}>{props.title}</Text>
        {props.qrDataUrl ? <Image src={props.qrDataUrl} style={styles.qr} /> : null}
      </View>
    </View>
  );
}