/*
 * File: EmptyState.tsx
 * Description: Empty state component for when no patients are found
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import { theme } from '../../../theme/theme';
import Icon from 'react-native-vector-icons/Feather';

// ============================================================================
// INTERFACES
// ============================================================================

interface EmptyStateProps {
  title: string;
  subtitle: string;
  iconName?: string;
  onRetry?: () => void;
  retryText?: string;
}

// ============================================================================
// EMPTY STATE COMPONENT
// ============================================================================

/**
 * EmptyState Component
 * 
 * Purpose: Display empty state when no patients are found
 * 
 * Features:
 * - Customizable title and subtitle
 * - Icon display
 * - Optional retry functionality
 * - Centered layout with proper spacing
 * - Medical-themed design
 */
const EmptyState: React.FC<EmptyStateProps> = ({
  title,
  subtitle,
  iconName = 'users',
  onRetry,
  retryText = 'Retry',
}) => {
  // ============================================================================
  // MAIN RENDER
  // ============================================================================

  return (
    <View style={styles.container}>
      {/* Icon */}
      <View style={styles.iconContainer}>
        <Icon
          name={iconName}
          size={64}
          color={theme.colors.textMuted}
        />
      </View>

      {/* Title */}
      <Text style={styles.title}>{title}</Text>

      {/* Subtitle */}
      <Text style={styles.subtitle}>{subtitle}</Text>

      {/* Retry Button */}
      {onRetry && (
        <TouchableOpacity
          style={styles.retryButton}
          onPress={onRetry}
          activeOpacity={0.7}
        >
          <Icon
            name="refresh-cw"
            size={16}
            color={theme.colors.background}
            style={styles.retryIcon}
          />
          <Text style={styles.retryText}>{retryText}</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

// ============================================================================
// STYLES
// ============================================================================

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: theme.spacing.xl,
    paddingVertical: theme.spacing.xxl,
  },
  iconContainer: {
    width: 120,
    height: 120,
    borderRadius: 60,
    backgroundColor: theme.colors.backgroundAlt,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: theme.spacing.lg,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: theme.colors.textPrimary,
    fontFamily: theme.typography.fontFamily.primary,
    textAlign: 'center',
    marginBottom: theme.spacing.sm,
  },
  subtitle: {
    fontSize: 16,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.primary,
    textAlign: 'center',
    lineHeight: 24,
    marginBottom: theme.spacing.lg,
  },
  retryButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: theme.colors.primary,
    paddingHorizontal: theme.spacing.lg,
    paddingVertical: theme.spacing.sm,
    borderRadius: 12,
    shadowColor: theme.colors.primary,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 3,
  },
  retryIcon: {
    marginRight: theme.spacing.xs,
  },
  retryText: {
    fontSize: 16,
    fontWeight: '600',
    color: theme.colors.background,
    fontFamily: theme.typography.fontFamily.primary,
  },
});

export default EmptyState;

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