import React, {PropsWithChildren} from 'react';
import {View, ViewStyle} from 'react-native';
import {Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props extends PropsWithChildren {
  title: string;
  style?: ViewStyle;
}

function Item({title, style, children}: Props) {
  const {theme} = useTheme();

  return (
    <View style={[styles.container, style]}>
      <Typography color={theme.text.neutral.lighter} variant="xxs">
        {title}
      </Typography>
      {children}
    </View>
  );
}

export default Item;