managarten/memoro/apps/mobile/components/statistics/WeeklyChartSkeleton.tsx

import React from 'react';
import { View } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import colors from '~/tailwind.config.js';

/**
 * Skeleton loader for WeeklyChart component
 */
const WeeklyChartSkeleton: React.FC = () => {
  const { isDark, themeVariant } = useTheme();

  const contentBackgroundColor = isDark
    ? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.contentBackground
    : (colors as any).theme?.extend?.colors?.[themeVariant]?.contentBackground;
  const borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
  const skeletonColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';

  // Create skeleton bars with different heights for 12 weeks
  const barHeights = [40, 60, 35, 80, 55, 45, 70, 30, 65, 50, 75, 40];

  return (
    <View
      style={{
        backgroundColor: contentBackgroundColor,
        borderRadius: 16,
        borderWidth: 1.5,
        borderColor: borderColor,
        padding: 16,
        marginBottom: 12,
      }}>
      {/* Chart title skeleton */}
      <View
        style={{
          height: 18,
          width: '40%',
          backgroundColor: skeletonColor,
          borderRadius: 4,
          marginBottom: 20,
        }}
      />

      {/* Chart container */}
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'flex-end',
          height: 120,
          marginBottom: 16,
        }}>
        {barHeights.map((height, index) => (
          <View
            key={index}
            style={{
              flex: 1,
              alignItems: 'center',
              marginHorizontal: 1,
            }}>
            {/* Bar skeleton */}
            <View
              style={{
                width: '90%',
                height: height,
                backgroundColor: skeletonColor,
                borderRadius: 2,
              }}
            />
          </View>
        ))}
      </View>

      {/* Legend skeleton */}
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'center',
          marginTop: 12,
        }}>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            marginRight: 20,
          }}>
          <View
            style={{
              width: 12,
              height: 12,
              backgroundColor: skeletonColor,
              borderRadius: 6,
              marginRight: 8,
            }}
          />
          <View
            style={{
              height: 12,
              width: 40,
              backgroundColor: skeletonColor,
              borderRadius: 4,
            }}
          />
        </View>

        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
          }}>
          <View
            style={{
              width: 12,
              height: 12,
              backgroundColor: skeletonColor,
              borderRadius: 6,
              marginRight: 8,
            }}
          />
          <View
            style={{
              height: 12,
              width: 50,
              backgroundColor: skeletonColor,
              borderRadius: 4,
            }}
          />
        </View>
      </View>
    </View>
  );
};

export default WeeklyChartSkeleton;