import React from 'react';
import { Text, View } from '@react-pdf/renderer';
import { Record } from '../../types';
import { COMPANY_CONFIG } from '../../config';
import { formatDate } from '../../markdown/renderer';
import { LogoSvg } from './LogoSvg';
import { styles } from './styles';

interface PDFHeaderProps {
  record: Record;
}

export const PDFHeader: React.FC<PDFHeaderProps> = ({ record }) => {
  const formattedDate = formatDate(record.createdAt);
  const reportTitle = record.chatType === 'PSYCHOLOGICAL' ? 'REPORTE PSICOLÓGICO' : 'REPORTE MÉDICO';

  return (
    <View style={styles.header}>
      <View style={styles.companyInfo}>
        <View style={styles.logo}>
          <LogoSvg />
        </View>
        <View style={styles.companyDetails}>
          <Text style={styles.companyName}>{COMPANY_CONFIG.name}</Text>
          <Text style={styles.companyDescription}>{COMPANY_CONFIG.description}</Text>
        </View>
      </View>
      
      <View style={styles.reportInfo}>
        <Text style={styles.reportTitle}>{reportTitle}</Text>
        <View style={styles.reportMeta}>
          <View style={styles.metaItem}>
            <Text style={styles.metaLabel}>ID:</Text>
            <Text>{record.id.slice(-8)}</Text>
          </View>
          <View style={styles.metaItem}>
            <Text style={styles.metaLabel}>Fecha:</Text>
            <Text>{formattedDate}</Text>
          </View>
          <View style={styles.metaItem}>
            <Text style={styles.metaLabel}>Tipo:</Text>
            <Text>Consulta Virtual</Text>
          </View>
        </View>
      </View>
    </View>
  );
};