/*
 * File: DepartmentStats.tsx
 * Description: Department statistics component displaying patient counts per department
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
} from 'react-native';
import { theme } from '../../../theme/theme';
import { DepartmentStats as DepartmentStatsType } from '../../../shared/types/dashboard';

interface DepartmentStatsProps {
  stats: DepartmentStatsType;
}

export const DepartmentStats: React.FC<DepartmentStatsProps> = ({
  stats,
}) => {
  const departments = [
    { key: 'emergency', label: 'Emergency', color: theme.colors.primary },
    { key: 'trauma', label: 'Trauma', color: theme.colors.critical },
    { key: 'cardiac', label: 'Cardiac', color: theme.colors.warning },
    { key: 'neurology', label: 'Neurology', color: theme.colors.info },
    { key: 'pediatrics', label: 'Pediatrics', color: theme.colors.success },
    { key: 'icu', label: 'ICU', color: theme.colors.secondary },
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Department Overview</Text>
      <View style={styles.statsGrid}>
        {departments.map((dept) => (
          <View key={dept.key} style={styles.statItem}>
            <View style={[styles.colorIndicator, { backgroundColor: dept.color }]} />
            <View style={styles.statContent}>
              <Text style={styles.statValue}>
                {stats[dept.key as keyof DepartmentStatsType]}
              </Text>
              <Text style={styles.statLabel}>{dept.label}</Text>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: theme.colors.background,
    borderRadius: theme.borderRadius.large,
    padding: theme.spacing.lg,
    marginBottom: theme.spacing.lg,
    ...theme.shadows.medium,
  },
  title: {
    fontSize: theme.typography.fontSize.displaySmall,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
    marginBottom: theme.spacing.lg,
  },
  statsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  statItem: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '48%',
    marginBottom: theme.spacing.md,
  },
  colorIndicator: {
    width: 12,
    height: 12,
    borderRadius: 6,
    marginRight: theme.spacing.sm,
  },
  statContent: {
    flex: 1,
  },
  statValue: {
    fontSize: theme.typography.fontSize.bodyLarge,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
  },
  statLabel: {
    fontSize: theme.typography.fontSize.bodySmall,
    color: theme.colors.textSecondary,
  },
}); 

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