import React from 'react';
import {Skeleton} from '@components/_HuGo/Skeleton';
import {DEFAULT_SKELETON_ROWS} from '@components/Post/components/PostBody/components/PostTranslation/components/DisplayTranslation/constants';
import {SPACING} from '@shared/theme';

import {styles} from './styles';

const skeletonItems = Array.from({length: DEFAULT_SKELETON_ROWS}).map(
  (_, index) => (
    <Skeleton.Item key={index} width="100%" height={SPACING['x2.5']} />
  ),
);
function LoadingTranslations() {
  return <Skeleton style={styles.skeletonContainer}>{skeletonItems}</Skeleton>;
}

export default LoadingTranslations;
