1import { Text } from 'expo-dev-client-components';
2import * as React from 'react';
3import { StyleSheet } from 'react-native';
4
5type DevelopmentServerSubtitleProps = {
6  title?: string;
7  subtitle?: string;
8  onPressSubtitle?: () => any;
9  image?: number | string | null;
10};
11
12export function DevelopmentServerSubtitle({
13  title,
14  subtitle,
15  image,
16  onPressSubtitle,
17}: DevelopmentServerSubtitleProps) {
18  const isCentered = !title && !image;
19
20  return subtitle ? (
21    <Text
22      color="secondary"
23      size="small"
24      type="InterRegular"
25      style={[
26        !title ? styles.subtitleMarginBottom : undefined,
27        isCentered ? styles.subtitleCentered : undefined,
28      ]}
29      onPress={onPressSubtitle}
30      ellipsizeMode="tail"
31      numberOfLines={title ? 1 : 2}>
32      {subtitle}
33    </Text>
34  ) : null;
35}
36
37const styles = StyleSheet.create({
38  subtitleMarginBottom: {
39    marginBottom: 2,
40  },
41  subtitleCentered: {
42    textAlign: 'center',
43    marginEnd: 10,
44  },
45});
46