import React from 'react';
import {ScrollView, View} from 'react-native';
import {Skeleton} from '@components';
import {useTheme} from '@shared/theme';
import {commonStyles} from '@shared/styles';

import {styles} from './styles';

function CommonSkeletonLine({height}: {height: number}) {
  return (
    <Skeleton.Item
      height={height}
      width="92%"
      style={[styles.commonSkeleton, styles.commonBorderRadius]}
    />
  );
}

export function KnowledgeLibrarySk() {
  const {theme, spacing} = useTheme();
  return (
    <Skeleton style={commonStyles.flex}>
      <ScrollView
        contentContainerStyle={[
          styles.container,
          {backgroundColor: theme.background.layout.default},
        ]}
        showsVerticalScrollIndicator={false}
        bounces={false}>
        <Skeleton.Item height={182} width="100%" />
        <View style={styles.innerContainer}>
          <View style={styles.cards}>
            <Skeleton.Item
              height={spacing.x4}
              width={100}
              style={styles.commonBorderRadius}
            />
            <Skeleton.Item
              height={spacing.x4}
              width={100}
              style={styles.commonBorderRadius}
            />
          </View>
          <CommonSkeletonLine height={spacing.x4} />
          <CommonSkeletonLine height={236} />
          <Skeleton.Item
            height={spacing['x2.5']}
            width={136}
            style={[styles.title, styles.commonBorderRadius]}
          />
          {Array.from(Array(4).keys()).map(val => (
            <CommonSkeletonLine key={`${val}`} height={spacing.x6} />
          ))}
        </View>
      </ScrollView>
    </Skeleton>
  );
}