import React, { memo } from 'react';
import { View, StyleSheet } from 'react-native';
import { wp } from '@/utils/ui/screenUtils';

const ListSkeleton = ({ itemCount }) => (
  <View style={styles.listContainer}>
    {Array.from({ length: itemCount }).map((_, i) => (
      <View key={i} style={styles.listCard}>
        <View style={styles.listTitle} />
        <View style={styles.listSubtitle} />
        <View style={styles.listButton} />
      </View>
    ))}
  </View>
);

const GridSkeleton = ({ itemCount, containerWidth }) => (
  <View style={styles.gridWrap}>
    {Array.from({ length: itemCount }).map((_, i) => (
      <View
        key={i}
        style={[
          styles.gridCard,
          { width: (containerWidth - wp(16) * 2 - wp(12)) / 2 },
        ]}
      >
        <View style={styles.gridBadge} />
        <View style={styles.gridLabel} />
      </View>
    ))}
  </View>
);

const ApproveSkeleton = ({ variant = 'list', itemCount = 3, containerWidth }) => {
  if (variant === 'grid') {
    const count = itemCount || 4;
    return <GridSkeleton itemCount={count} containerWidth={containerWidth || wp(750)} />;
  }
  return <ListSkeleton itemCount={itemCount} />;
};

export default memo(ApproveSkeleton);

const styles = StyleSheet.create({
  listContainer: { paddingTop: wp(8), paddingHorizontal: wp(16) },
  listCard: {
    marginBottom: wp(12),
    backgroundColor: '#FFFFFF',
    borderRadius: wp(8),
    borderWidth: wp(1),
    borderColor: '#E0E0E4',
    paddingHorizontal: wp(12),
    paddingTop: wp(12),
    paddingBottom: wp(16),
  },
  listTitle: { width: wp(140), height: wp(16), backgroundColor: '#F2F3F5', borderRadius: wp(4), marginBottom: wp(12) },
  listSubtitle: { width: wp(220), height: wp(12), backgroundColor: '#F2F3F5', borderRadius: wp(4), marginBottom: wp(16) },
  listButton: { width: wp(180), height: wp(40), backgroundColor: '#F2F3F5', borderRadius: wp(8) },

  gridWrap: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', paddingHorizontal: wp(16), paddingTop: wp(8) },
  gridCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: wp(10),
    height: wp(85),
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: wp(12),
    borderWidth: wp(1),
    borderColor: '#E0E0E4',
  },
  gridBadge: { width: wp(48), height: wp(20), backgroundColor: '#F2F3F5', borderRadius: wp(6), marginBottom: wp(8) },
  gridLabel: { width: wp(60), height: wp(14), backgroundColor: '#F2F3F5', borderRadius: wp(6) },
});