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

import {styles} from './styles';

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

  return (
    <Skeleton>
      <View
        style={[
          styles.container,
          {backgroundColor: theme.background.layout.tertiary},
        ]}>
        <View style={styles.header}>
          <Skeleton.Item
            rounded
            style={styles.image}
            height={spacing.x5}
            width={spacing.x5}
          />
          <View style={styles.title}>
            <Skeleton.Item height={spacing.x3} />
            <Skeleton.Item height={spacing['x1.5']} width="50%" />
          </View>
        </View>
        <View style={styles.body}>
          <Skeleton.Item height={spacing.x2} />
          <Skeleton.Item height={spacing.x2} />
          <Skeleton.Item height={spacing.x2} />
          <Skeleton.Item height={spacing.x2} width="50%" />
        </View>
      </View>
    </Skeleton>
  );
}
