import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Skeleton, SkeletonText, SkeletonCircle } from '../ui/Skeleton';
import { useTheme } from '../../theme/ThemeContext';

/**
 * Skeleton para tarjeta de tienda
 */
export function StoreCardSkeleton() {
  const { colors } = useTheme();

  return (
    <View style={[styles.container, { backgroundColor: colors.card }]}>
      <View style={styles.header}>
        <SkeletonCircle size={56} />
        <View style={styles.headerContent}>
          <SkeletonText width="60%" height={18} />
          <SkeletonText width="80%" height={12} style={{ marginTop: 6 }} />
        </View>
      </View>
      <View style={styles.stats}>
        <View style={styles.stat}>
          <SkeletonText width={40} height={20} />
          <SkeletonText width={60} height={10} style={{ marginTop: 4 }} />
        </View>
        <View style={styles.stat}>
          <SkeletonText width={40} height={20} />
          <SkeletonText width={60} height={10} style={{ marginTop: 4 }} />
        </View>
        <View style={styles.stat}>
          <SkeletonText width={40} height={20} />
          <SkeletonText width={60} height={10} style={{ marginTop: 4 }} />
        </View>
      </View>
    </View>
  );
}

/**
 * Lista de skeletons de tiendas
 */
export function StoreListSkeleton({ count = 3 }: { count?: number }) {
  return (
    <View style={styles.list}>
      {Array.from({ length: count }).map((_, index) => (
        <StoreCardSkeleton key={index} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerContent: {
    flex: 1,
    marginLeft: 12,
  },
  stats: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 16,
    paddingTop: 16,
    borderTopWidth: 1,
    borderTopColor: 'rgba(0,0,0,0.1)',
  },
  stat: {
    alignItems: 'center',
  },
  list: {
    padding: 16,
  },
});