import React, { memo } from 'react';
import { StyleSheet, View } from 'react-native';

import { Card } from '../../../components';
import { SkeletonBlock } from '../../../components/Loader';

const CardsSkeletonComponent = () => {
  return (
    <View style={styles.container}>
      <Card style={styles.heroCard}>
        <SkeletonBlock height={22} width="34%" />
        <SkeletonBlock height={36} width="68%" />
        <SkeletonBlock height={18} width="48%" />
        <View style={styles.bottomRow}>
          <SkeletonBlock height={14} width={70} />
          <SkeletonBlock height={14} width={90} />
          <SkeletonBlock height={14} width={60} />
        </View>
      </Card>

      <View style={styles.metricRow}>
        {[0, 1, 2].map((item) => (
          <Card key={item} style={styles.metricCard}>
            <SkeletonBlock height={18} width="42%" />
            <SkeletonBlock height={28} width="70%" />
            <SkeletonBlock height={14} width="55%" />
          </Card>
        ))}
      </View>

      <Card style={styles.sectionCard}>
        <SkeletonBlock height={18} width="28%" />
        <SkeletonBlock height={14} width="64%" />
        <SkeletonBlock height={76} width="100%" />
        <SkeletonBlock height={76} width="100%" />
      </Card>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    gap: 18,
  },
  heroCard: {
    padding: 22,
    borderRadius: 28,
    gap: 14,
  },
  bottomRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 8,
  },
  metricRow: {
    flexDirection: 'row',
    gap: 12,
  },
  metricCard: {
    flex: 1,
    gap: 12,
  },
  sectionCard: {
    gap: 14,
  },
});

export const CardsSkeleton = memo(CardsSkeletonComponent);