import React, {PropsWithChildren} from 'react';
import {Pressable, StyleProp, View, ViewStyle} from 'react-native';
import {Typography, TypographyVariant} from '@components';

import {styles} from './styles';

interface Props extends PropsWithChildren {
  contentContainerStyle?: StyleProp<ViewStyle>;
  description?: string;
  disablePress?: boolean;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
  title: string;
  variant?: TypographyVariant;
}

function ServiceManagementInformationRow({
  children,
  contentContainerStyle,
  description,
  disablePress = false,
  onPress,
  style,
  title,
  variant = 'xs',
}: Props) {
  return (
    <Pressable
      style={[styles.container, style]}
      disabled={!onPress || disablePress}
      onPress={onPress}>
      <Typography weight="semiBold" variant={variant} style={styles.title}>
        {title}
      </Typography>
      {!!description && (
        <Typography
          variant={variant}
          numberOfLines={1}
          style={styles.description}>
          {description}
        </Typography>
      )}
      {!!children && <View style={contentContainerStyle}>{children}</View>}
    </Pressable>
  );
}

export default ServiceManagementInformationRow;