import React from 'react';
import {View} from 'react-native';
import {Skeleton, Title} from '@components';
import {useInsensitiveTranslation} from '@config/i18n/useInsensitiveTranslation';

import {PerformanceReviewType} from '../interfaces';
import {styles} from './styles';
import {PerformanceListItemSK} from './PerformanceListItemSK';

export function PerformanceReviewsListSK() {
  const {t} = useInsensitiveTranslation();
  const data = [
    {key: t(`performance.types.${PerformanceReviewType.AUTO_REVIEW}`)},
    {key: t(`performance.types.${PerformanceReviewType.SUBORDINATE_REVIEW}`)},
    {key: t(`performance.types.${PerformanceReviewType.BOSS_REVIEW}`)},
    {key: t(`performance.types.${PerformanceReviewType.PEER_REVIEW}`)},
  ];
  return (
    <Skeleton style={styles.container}>
      {data.map(item => (
        <View key={item.key}>
          <Title title={item.key} size="s" style={styles.title} />
          <PerformanceListItemSK key={item.key} />
        </View>
      ))}
    </Skeleton>
  );
}