import { Pressable, StyleSheet, Text, View } from 'react-native';
import { color, spacing, typography } from '../../theme';

interface Props {
  title: string;
  actionLabel?: string;
  onAction?: () => void;
}

export function SectionHeader({ title, actionLabel, onAction }: Props) {
  return (
    <View style={styles.row}>
      <Text style={styles.title}>{title}</Text>
      {actionLabel && onAction ? (
        <Pressable onPress={onAction} accessibilityRole="button" hitSlop={8}>
          <Text style={styles.action}>{actionLabel}</Text>
        </Pressable>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: spacing[2],
  },
  title: {
    color: color.ink[900],
    fontSize: typography.scale.h3.size,
    fontWeight: '700',
  },
  action: {
    color: color.blue[600],
    fontSize: typography.scale.caption.size,
    fontWeight: '700',
  },
});