1import { spacing } from '@expo/styleguide-native';
2import { useExpoTheme, Text, Spacer, View } from 'expo-dev-client-components';
3import * as React from 'react';
4import { TouchableOpacity } from 'react-native-gesture-handler';
5
6export function WarningBox({
7  message,
8  showLearnMore,
9  onLearnMorePress,
10}: {
11  message: string;
12  showLearnMore?: boolean;
13  onLearnMorePress?: () => void;
14}) {
15  const theme = useExpoTheme();
16
17  const learnMoreButton = showLearnMore ? (
18    <>
19      <Spacer.Vertical size="small" />
20      <TouchableOpacity
21        onPress={onLearnMorePress}
22        style={{
23          padding: spacing[2],
24          alignSelf: 'flex-start',
25          backgroundColor: theme.button.tertiary.background,
26          borderRadius: 4,
27        }}>
28        <Text type="InterSemiBold" style={{ color: theme.button.tertiary.foreground }} size="small">
29          Learn more
30        </Text>
31      </TouchableOpacity>
32    </>
33  ) : null;
34  return (
35    <View bg="warning" border="warning" rounded="large" padding="medium">
36      <Text color="warning" type="InterRegular" size="medium">
37        {message}
38      </Text>
39      {learnMoreButton}
40    </View>
41  );
42}
43