/*
 * File: FilterBar.tsx
 * Description: Component to filter cases by status
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

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

interface FilterBarProps {
  filter: 'critical' | 'urgent' | 'routine';
  onChange: (filter: 'critical' | 'urgent' | 'routine') => void;
}

/**
 * FilterBar - allows filtering cases by status
 */
const FilterBar: React.FC<FilterBarProps> = ({ filter, onChange }) => (
  <View style={styles.container}>
    <Button
      title="Critical"
      onPress={() => onChange('critical')}
      style={[styles.button, filter === 'critical' && styles.selected]}
      textStyle={filter === 'critical' ? styles.selectedText : undefined}
    />
    <Button
      title="Urgent"
      onPress={() => onChange('urgent')}
      style={[styles.button, filter === 'urgent' && styles.selected]}
      textStyle={filter === 'urgent' ? styles.selectedText : undefined}
    />
    <Button
      title="Routine"
      onPress={() => onChange('routine')}
      style={[styles.button, filter === 'routine' && styles.selected]}
      textStyle={filter === 'routine' ? styles.selectedText : undefined}
    />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: Spacing.md,
  },
  button: {
    flex: 1,
    marginHorizontal: Spacing.xs,
    backgroundColor: Colors.inactiveState,
  },
  selected: {
    backgroundColor: Colors.selectedState,
  },
  selectedText: {
    color: Colors.background,
    fontWeight: 'bold',
  },
});

export default FilterBar;

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