/*
 * File: StatsPanel.tsx
 * Description: Component to display dashboard statistics (stub)
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Card } from '../../../../shared/src/components/Card';
import { Colors, Spacing, Typography } from '../../../../shared/src/theme';

interface StatsPanelProps {
  stats: { label: string; value: string | number }[];
}

/**
 * StatsPanel - displays dashboard statistics (stub)
 */
const StatsPanel: React.FC<StatsPanelProps> = ({ stats }) => (
  <Card style={styles.card}>
    <Text style={styles.title}>Statistics</Text>
    <View style={styles.statsRow}>
      {stats.map((stat, idx) => (
        <View key={idx} style={styles.statItem}>
          <Text style={styles.statValue}>{stat.value}</Text>
          <Text style={styles.statLabel}>{stat.label}</Text>
        </View>
      ))}
    </View>
  </Card>
);

const styles = StyleSheet.create({
  card: {
    marginBottom: Spacing.md,
  },
  title: {
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.md,
    color: Colors.textPrimary,
    marginBottom: Spacing.sm,
  },
  statsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  statItem: {
    alignItems: 'center',
    flex: 1,
  },
  statValue: {
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.lg,
    color: Colors.primary,
  },
  statLabel: {
    fontFamily: Typography.fontFamily.regular,
    fontSize: Typography.fontSize.sm,
    color: Colors.textSecondary,
  },
});

export default StatsPanel;

/*
 * End of File: StatsPanel.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */