managarten/memoro/apps/mobile/components/organisms/BlueprintCardSkeleton.tsx

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

/**
 * Skeleton loader for BlueprintCard component
 * Matches exact BlueprintCard structure and dimensions
 */
const BlueprintCardSkeleton = () => {
  const { isDark, themeVariant } = useTheme();
  
  // Get theme colors
  const borderColor = isDark
    ? ((colors as any).theme?.extend?.colors?.dark)?.[themeVariant]?.border || '#424242'
    : ((colors as any).theme?.extend?.colors)?.[themeVariant]?.border || '#e6e6e6';
  
  const backgroundColor = isDark 
    ? ((colors as any).theme?.extend?.colors?.dark)?.[themeVariant]?.contentBackground 
    : ((colors as any).theme?.extend?.colors)?.[themeVariant]?.contentBackground;
    
  const skeletonColor = isDark ? '#3a3a3a' : '#e0e0e0';

  return (
    <View 
      style={[
        styles.container,
        { 
          backgroundColor,
          borderWidth: 1,
          borderColor
        }
      ]}
    >
      <View style={styles.header}>
        {/* Title skeleton */}
        <View 
          style={[
            styles.titleSkeleton,
            { backgroundColor: skeletonColor }
          ]} 
        />
        
        {/* Pin icon skeleton */}
        <View 
          style={[
            styles.iconSkeleton,
            { 
              backgroundColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)'
            }
          ]} 
        />
      </View>
      
      {/* Description skeleton - two lines */}
      <View>
        <View 
          style={[
            styles.descriptionLine,
            { backgroundColor: skeletonColor, width: '100%' }
          ]} 
        />
        <View 
          style={[
            styles.descriptionLine,
            { backgroundColor: skeletonColor, width: '75%' }
          ]} 
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  titleSkeleton: {
    height: 20,
    width: 180,
    borderRadius: 4,
    opacity: 0.6,
  },
  iconSkeleton: {
    width: 36,
    height: 36,
    borderRadius: 8,
    opacity: 0.6,
  },
  descriptionLine: {
    height: 14,
    borderRadius: 3,
    marginBottom: 6,
    opacity: 0.5,
  },
});

export default BlueprintCardSkeleton;