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

import React from 'react';
import { View } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';

/**
 * Skeleton loader for WeekdayChart component
 * Matches exact WeekdayChart structure: just a simple list, not a bar chart
 */
const WeekdayChartSkeleton: React.FC = () => {
  const { isDark, themeVariant } = useTheme();

  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)';

  return (
    <View
      style={{
        paddingVertical: 12, // matches WeekdayChart paddingVertical
        paddingHorizontal: 16, // matches WeekdayChart paddingHorizontal
      }}>
      {/* Chart title skeleton - matches WeekdayChart title styling */}
      <View
        style={{
          height: 17, // fontSize 14 * fontWeight '500' ≈ 17
          width: '60%',
          backgroundColor: skeletonColor,
          borderRadius: 4,
          marginBottom: 8, // matches marginBottom: 8 in WeekdayChart
        }}
      />

      {/* Weekday items skeleton - matches WeekdayChart list items */}
      {[1, 2, 3].map((index) => (
        <View
          key={index}
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            marginBottom: 4, // matches marginBottom: 4 in WeekdayChart
          }}>
          {/* Day name skeleton - matches WeekdayChart day styling */}
          <View
            style={{
              height: 14, // fontSize 12 ≈ 14
              width: '30%',
              backgroundColor: skeletonColor,
              borderRadius: 4,
              flex: 1, // matches flex: 1 in WeekdayChart
            }}
          />

          {/* Count skeleton - matches WeekdayChart count styling */}
          <View
            style={{
              height: 14, // fontSize 12 ≈ 14
              width: '25%',
              backgroundColor: skeletonColor,
              borderRadius: 4,
            }}
          />
        </View>
      ))}
    </View>
  );
};

export default WeekdayChartSkeleton;