import React from 'react';
import { Text, StyleSheet } from 'react-native';
import { categoryLabel, type Category } from '@ai-radar/shared';
import { useTheme } from '../theme/ThemeProvider';
import { categoryColor, textStyle } from '../theme';

/**
 * The category label.
 *
 * Coloured text, never a filled chip. DESIGN.md is explicit about this:
 * six filled pills on one screen is six competing accents, and the point
 * of the colour is to let the eye skip to a kind of story, not to
 * decorate.
 */
export function CategoryLabel({ category }: { category: Category }) {
  const { palette, locale } = useTheme();

  return (
    <Text
      style={[
        textStyle('label', locale),
        styles.text,
        { color: categoryColor(category, palette) },
      ]}
      numberOfLines={1}
    >
      {categoryLabel(category, locale).toUpperCase()}
    </Text>
  );
}

const styles = StyleSheet.create({
  text: {
    // Arabic has no uppercase, so the tracking that makes Latin caps
    // readable just pulls the letters apart. textStyle already drops it
    // for ar; this only guards the shared baseline.
    textTransform: 'none',
  },
});