import { StyleSheet, Text, View } from '@react-pdf/renderer';
import type { ReactNode } from 'react';

import { PDF_TOKENS } from './tokens';

const styles = StyleSheet.create({
  wrap: {
    flexDirection: 'column',
    gap: PDF_TOKENS.spacing.rowGap,
  },
  heading: {
    fontFamily: PDF_TOKENS.fonts.sansBold,
    fontSize: PDF_TOKENS.sizes.sectionH,
    color: PDF_TOKENS.colors.text,
    borderBottomWidth: 1,
    borderBottomColor: PDF_TOKENS.colors.border,
    paddingBottom: 4,
  },
  subhead: {
    fontFamily: PDF_TOKENS.fonts.sans,
    fontSize: PDF_TOKENS.sizes.small,
    color: PDF_TOKENS.colors.textMuted,
  },
});

export interface SectionProps {
  title: string;
  subtitle?: string;
  children: ReactNode;
}

export function Section({ title, subtitle, children }: SectionProps) {
  return (
    <View style={styles.wrap} wrap={false}>
      <Text style={styles.heading}>{title}</Text>
      {subtitle ? <Text style={styles.subhead}>{subtitle}</Text> : null}
      {children}
    </View>
  );
}
