import React from 'react';
import { Image } from 'react-native';
import { Box } from '../Box';
import { fonts } from '../../theme/theme';
import { Text } from '../Text';
import { widthPercentageToDP } from '../../utils';
import type { IOnBoardingItem } from './onboarding';

export const Content = ({ item }: { item: IOnBoardingItem }) => (
  <Box
    alignItems={'center'}
    width={widthPercentageToDP('100%')}
    padding={'spacing-s'}
  >
    <Image
      source={item.image}
      resizeMode="contain"
      style={{
        height: item.height || widthPercentageToDP('125%'),
        width: item.width || widthPercentageToDP('80%'),
      }}
    />
    <Text
      variant={'H2'}
      fontFamily={fonts.caustenRoundBold}
      marginBottom={'spacing-s'}
      color={'yankeesBlue'}
    >
      {item.title}
    </Text>
    <Text
      variant={'SubTitle'}
      fontFamily={fonts.caustenRoundRegular}
      color={'darkBlueGray'}
      textAlign={'center'}
    >
      {item.subtitle}
    </Text>
  </Box>
);