import { View } from 'react-native';

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

export function DashboardSkeleton() {
  return (
    <View className="p-4" accessibilityLabel="Chargement du tableau de bord">
      <View className="mb-2 h-7 w-[55%] rounded-lg" style={{ backgroundColor: '#E2E8F0' }} />
      <View className="mb-4 h-24 rounded-2xl border" style={{ borderColor: UI.border, backgroundColor: UI.card }} />
      <View className="mb-2 h-7 w-[40%] rounded-lg" style={{ backgroundColor: '#E2E8F0' }} />
      <View className="mb-4 flex-row gap-3">
        {[1, 2, 3].map((k) => (
          <View
            key={k}
            className="h-24 flex-1 rounded-2xl border"
            style={{ borderColor: UI.border, backgroundColor: UI.card }}
          />
        ))}
      </View>
      <View className="mb-2 h-7 w-[35%] rounded-lg" style={{ backgroundColor: '#E2E8F0' }} />
      <View className="mb-4 h-20 rounded-2xl border" style={{ borderColor: UI.border, backgroundColor: '#F8FAFC' }} />
      <View className="mb-2 h-7 w-[45%] rounded-lg" style={{ backgroundColor: '#E2E8F0' }} />
      <View className="gap-3">
        {[1, 2, 3].map((k) => (
          <View
            key={k}
            className="h-16 rounded-2xl border"
            style={{ borderColor: UI.border, backgroundColor: UI.card }}
          />
        ))}
      </View>
    </View>
  );
}