import { Text, View } from 'react-native';
import { useTokens } from '@/theme/tokens';

/** Écran futur du périmètre R4 annoncé — même patron que la sidebar web :
 *  visible, honnête sur sa release, jamais un cul-de-sac silencieux. */
export function AVenir({ titre, release, detail }: { titre: string; release: string; detail: string }) {
  const t = useTokens();
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 32, gap: 8 }}>
      <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 18, color: t.encre }}>
        {titre}
      </Text>
      <Text
        style={{
          fontFamily: 'Manrope_700Bold',
          fontSize: 11,
          color: t.safran,
          backgroundColor: t.safranDoux,
          paddingHorizontal: 10,
          paddingVertical: 3,
          borderRadius: 999,
          overflow: 'hidden',
        }}
      >
        Disponible en {release}
      </Text>
      <Text
        style={{
          fontFamily: 'Manrope_400Regular',
          fontSize: 13,
          color: t.encre2,
          textAlign: 'center',
          maxWidth: 280,
        }}
      >
        {detail}
      </Text>
    </View>
  );
}
