import React from 'react';
import {View} from 'react-native';
import {Skeleton, CardContainer} from '@components';
import {ANIMATION_CONSTANTS} from '@modules/learning/constants';
import {useTheme} from '@shared/theme';
import {commonStyles} from '@shared/styles';

import {styles} from './styles';

function SessionSk() {
  const {theme} = useTheme();

  return (
    <View
      style={[
        commonStyles.flex,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <Skeleton>
        <Skeleton.Item
          width="100%"
          height={ANIMATION_CONSTANTS.IMAGE_CONTAINER_HEIGHT}
          style={styles.bannerSkeleton}
        />
        <View style={styles.tagContainer}>
          <Skeleton.Item width="20%" height={30} />
        </View>
        <View style={styles.contentContainer}>
          <View style={styles.titleCard}>
            <Skeleton.Item
              width="90%"
              height={28}
              style={styles.titleSkeleton}
            />
            <Skeleton.Item
              width="70%"
              height={16}
              style={styles.dateTimeSkeleton}
            />
          </View>
          <CardContainer style={styles.card}>
            {Array.from({length: 4}).map((_, index) => (
              <View key={index} style={styles.infoSection}>
                <Skeleton.Item
                  width="10%"
                  height={16}
                  style={styles.labelSkeleton}
                />
                <Skeleton.Item
                  width="40%"
                  height={16}
                  style={styles.labelSkeleton}
                />
              </View>
            ))}
            <Skeleton.Item
              width="100%"
              height={16}
              style={styles.descriptionSkeleton}
            />
            <Skeleton.Item
              width="35%"
              height={16}
              style={styles.descriptionSkeleton}
            />
          </CardContainer>

          {/* Collaborator Card Skeleton */}
          <CardContainer style={styles.card}>
            <Skeleton.Item
              width="35%"
              height={30}
              style={styles.labelSkeleton}
            />
            <View style={styles.collaboratorContainer}>
              <Skeleton.Item
                width={40}
                height={40}
                style={styles.avatarSkeleton}
              />
              <View style={styles.collaboratorInfo}>
                <Skeleton.Item
                  width="60%"
                  height={18}
                  style={styles.collaboratorNameSkeleton}
                />
                <Skeleton.Item
                  width="40%"
                  height={14}
                  style={styles.collaboratorRoleSkeleton}
                />
              </View>
            </View>
          </CardContainer>

          {/* Additional Info Card Skeleton */}
          <CardContainer style={styles.card}>
            <Skeleton.Item
              width="50%"
              height={18}
              style={styles.additionalInfoTitleSkeleton}
            />
            <Skeleton.Item
              width="80%"
              height={16}
              style={styles.additionalInfoContentSkeleton}
            />
          </CardContainer>

          {/* Action Button Skeleton */}
          <View style={styles.actionButtonContainer}>
            <Skeleton.Item
              width="100%"
              height={48}
              style={styles.actionButtonSkeleton}
            />
          </View>
        </View>
      </Skeleton>
    </View>
  );
}

export default SessionSk;