import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '../theme/ThemeProvider';
import { textStyle, space } from '../theme';

/**
 * A section heading.
 *
 * Small mono label plus a hairline rule. The rule does the separating so
 * the heading itself can stay quiet — a large bold heading above every
 * group competes with the story titles, which are the thing that should
 * be loud.
 */
export function SectionHeading({ title }: { title: string }) {
  const { palette, locale, rtl } = useTheme();

  return (
    <View style={[styles.wrap, { flexDirection: rtl ? 'row-reverse' : 'row' }]}>
      <Text
        style={[textStyle('label', locale), { color: palette.text2 }]}
        numberOfLines={1}
      >
        {locale === 'ar' ? title : title.toUpperCase()}
      </Text>
      <View style={[styles.rule, { backgroundColor: palette.border }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {
    alignItems: 'center',
    gap: space.s3,
    marginBottom: space.s4,
  },
  rule: {
    flex: 1,
    height: StyleSheet.hairlineWidth,
  },
});