/**
 * Il titolo di una sezione della ricetta («Per l'impasto», «Per condire»):
 * piccolo e maiuscolo, nel colore dell'app, con una riga sottile che chiude il
 * blocco fino al bordo. Scelto da Paolo il 30/09 (proposta B del campionario
 * `docs/design/campionari/sezioni.html`): grigio com'era sembrava un'etichetta.
 *
 * Uguale nella ricetta, nella schermata dove la si scrive e nelle ricette
 * italiane. `fine` è quello che sta dopo la riga, per esempio i tre puntini
 * del menù della sezione.
 *
 * L'accento sul fondo sta sopra 4,5:1 in tutti e due i temi (tema.ts); la
 * riga è l'accento al 35%, e non porta testo.
 */
import type { ReactNode } from 'react';
import { useMemo } from 'react';
import type { StyleProp, ViewStyle } from 'react-native';
import { StyleSheet, Text, View } from 'react-native';

import type { Colori } from '../tema.ts';
import { SPAZIO, TESTO, useColori } from '../tema.ts';

export interface PropsTitoloSezione {
  nome: string;
  /** Una sezione senza nome si scrive in corsivo («Senza nome»). */
  senzaNome?: boolean;
  fine?: ReactNode;
  /** Quante righe al massimo. Di solito nessun limite: un nome lungo va a capo. */
  righe?: number;
  style?: StyleProp<ViewStyle>;
}

export default function TitoloSezione({ nome, senzaNome = false, fine, righe, style }: PropsTitoloSezione) {
  const colori = useColori();
  const stili = useMemo(() => creaStili(colori), [colori]);
  return (
    <View style={[stili.riga, style]}>
      <Text style={[stili.nome, senzaNome ? stili.corsivo : null]} numberOfLines={righe} accessibilityRole="header">
        {nome}
      </Text>
      <View style={stili.linea} />
      {fine}
    </View>
  );
}

const creaStili = (colori: Colori) =>
  StyleSheet.create({
    riga: { flexDirection: 'row', alignItems: 'center', gap: SPAZIO.s },
    nome: {
      flexShrink: 1,
      ...TESTO.piccolo,
      fontWeight: '700',
      letterSpacing: 0.8,
      textTransform: 'uppercase',
      color: colori.accento,
    },
    corsivo: { fontStyle: 'italic' },
    // #RRGGBBAA: 59 è il 35% di 255.
    linea: { flex: 1, minWidth: SPAZIO.l, height: StyleSheet.hairlineWidth * 2, backgroundColor: `${colori.accento}59` },
  });