import React from 'react';
import {View} from 'react-native';
import {Skeleton} from '@components/_HuGo/Skeleton';
import {useTheme} from '@shared/theme';
import {AspectRatios, windowDimensions} from '@shared/constants';

import {styles} from './styles';

export function ArticleSkeleton() {
  const {spacing, theme} = useTheme();

  return (
    <Skeleton>
      <View style={{backgroundColor: theme.background.elements.default}}>
        <Skeleton.Item
          style={styles.image}
          height={AspectRatios.MAGAZINE * windowDimensions.width}
          width={windowDimensions.width}
        />
        <View style={styles.contentContainer}>
          <Skeleton.Item height={spacing.x3} />
          <Skeleton.Item height={spacing.x2} width="35%" />
          <View style={styles.row}>
            <Skeleton.Item height={spacing.x3} width="25%" />
            <Skeleton.Item height={spacing.x3} width="25%" />
            <Skeleton.Item height={spacing.x3} width="25%" />
          </View>
          <Skeleton.Item height={spacing.x3} />
          <View style={styles.row}>
            <Skeleton.Item height={spacing.x4} width="15%" />
            <Skeleton.Item height={spacing.x4} width="15%" />
            <Skeleton.Item height={spacing.x4} width="15%" />
          </View>
        </View>
        <Skeleton.Item height={1} style={styles.separator} />
        <View style={styles.footer}>
          <Skeleton.Item height={spacing.x2} width="20%" />
          <Skeleton.Item height={spacing.x2} width="35%" />
        </View>
      </View>
    </Skeleton>
  );
}
