/*
 * File: DashboardHeader.tsx
 * Description: Dashboard header component displaying ER department overview and statistics
 * 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 { ERDashboard } from '../../../shared/types/dashboard';

interface DashboardHeaderProps {
  dashboard: ERDashboard;
}

export const DashboardHeader: React.FC<DashboardHeaderProps> = ({
  dashboard,
}) => {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Emergency Department</Text>
        <Text style={styles.subtitle}>
          {dashboard.shiftInfo.currentShift} Shift • {dashboard.shiftInfo.attendingPhysician}
        </Text>
      </View>

      <View style={styles.statsContainer}>
        <View style={styles.statItem}>
          <Text style={styles.statValue}>{dashboard.totalPatients}</Text>
          <Text style={styles.statLabel}>Total Patients</Text>
        </View>
        <View style={styles.statItem}>
          <Text style={[styles.statValue, styles.criticalValue]}>
            {dashboard.criticalPatients}
          </Text>
          <Text style={styles.statLabel}>Critical</Text>
        </View>
        <View style={styles.statItem}>
          <Text style={styles.statValue}>{dashboard.pendingScans}</Text>
          <Text style={styles.statLabel}>Pending Scans</Text>
        </View>
        <View style={styles.statItem}>
          <Text style={styles.statValue}>{dashboard.bedOccupancy}%</Text>
          <Text style={styles.statLabel}>Bed Occupancy</Text>
        </View>
      </View>

      <View style={styles.lastUpdated}>
        <Text style={styles.lastUpdatedText}>
          Last updated: {dashboard.lastUpdated.toLocaleTimeString()}
        </Text>
      </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,
  },
  header: {
    marginBottom: theme.spacing.lg,
  },
  title: {
    fontSize: theme.typography.fontSize.displayMedium,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
    marginBottom: theme.spacing.xs,
  },
  subtitle: {
    fontSize: theme.typography.fontSize.bodyMedium,
    color: theme.colors.textSecondary,
  },
  statsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: theme.spacing.lg,
  },
  statItem: {
    alignItems: 'center',
    flex: 1,
  },
  statValue: {
    fontSize: theme.typography.fontSize.displaySmall,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.primary,
    marginBottom: theme.spacing.xs,
  },
  criticalValue: {
    color: theme.colors.critical,
  },
  statLabel: {
    fontSize: theme.typography.fontSize.bodySmall,
    color: theme.colors.textSecondary,
    textAlign: 'center',
  },
  lastUpdated: {
    alignItems: 'center',
  },
  lastUpdatedText: {
    fontSize: theme.typography.fontSize.caption,
    color: theme.colors.textMuted,
  },
}); 

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