import { View } from 'react-native';

import { UI } from '@/constants/uiTheme';

type Props = {
  rows?: number;
  /** Hauteur des cartes (liste verticale). */
  variant?: 'card' | 'compact';
};

export function ListSkeleton({ rows = 6, variant = 'card' }: Props) {
  const gap = variant === 'compact' ? 10 : 14;
  const pad = variant === 'compact' ? 12 : 16;
  return (
    <View className="px-3 pt-3" accessibilityLabel="Chargement en cours">
      {Array.from({ length: rows }).map((_, i) => (
        <View
          key={i}
          className="mb-3 rounded-2xl border bg-white"
          style={{
            borderColor: UI.border,
            padding: pad,
            gap,
          }}
        >
          <View
            className="h-5 rounded-md"
            style={{ width: '62%', backgroundColor: '#E2E8F0' }}
          />
          <View className="h-4 rounded-md" style={{ width: '92%', backgroundColor: '#F1F5F9' }} />
          <View className="h-4 rounded-md" style={{ width: '78%', backgroundColor: '#F1F5F9' }} />
          {variant === 'card' ? (
            <View className="h-4 rounded-md" style={{ width: '44%', backgroundColor: '#E2E8F0' }} />
          ) : null}
        </View>
      ))}
    </View>
  );
}