import {memo} from 'react';
import {View} from 'react-native';
import {Typography} from '@components';
import {Competency} from '@modules/performance/interfaces';
import {useTheme} from '@shared/theme';
import {commonStyles} from '@shared/styles';

interface Props {
  competency: Competency;
}

function CompetencyStepBodyComponent({competency}: Props) {
  const {theme} = useTheme();
  return (
    <View style={commonStyles.flexShrink}>
      <Typography
        weight="semiBold"
        variant="m"
        color={theme.text.neutral.default}>
        {competency.name}
      </Typography>
      {!!competency.description && (
        <Typography variant="xs" color={theme.text.neutral.lighter}>
          {competency.description}
        </Typography>
      )}
    </View>
  );
}

export const CompetencyStepBody = memo(CompetencyStepBodyComponent);