import { ScrollView, View } from 'react-native';

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

const COL_W = 216;

export function PipelineSkeleton() {
  return (
    <ScrollView
      horizontal
      className="flex-1"
      contentContainerStyle={{ padding: 12, paddingBottom: 96 }}
      accessibilityLabel="Chargement du pipeline"
    >
      {Array.from({ length: 4 }).map((_, col) => (
        <View
          key={col}
          className="mr-3 rounded-2xl border bg-white p-3"
          style={{ width: COL_W, borderColor: UI.border }}
        >
          <View className="mb-3 h-6 w-[85%] rounded-md" style={{ backgroundColor: '#E2E8F0' }} />
          <View className="mb-2 h-3 w-10 rounded" style={{ backgroundColor: '#CBD5E1' }} />
          {Array.from({ length: 3 }).map((__, row) => (
            <View
              key={row}
              className="mb-2 rounded-xl border p-3"
              style={{ borderColor: '#E2E8F0', backgroundColor: '#F8FAFC' }}
            >
              <View className="mb-2 h-4 w-[90%] rounded" style={{ backgroundColor: '#E2E8F0' }} />
              <View className="h-3 w-[55%] rounded" style={{ backgroundColor: '#F1F5F9' }} />
            </View>
          ))}
        </View>
      ))}
    </ScrollView>
  );
}