/*
 * File: SearchInput.tsx
 * Description: Themed search input using Clinical Blue Interface design system
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { View, TextInput as RNTextInput, StyleSheet, TextInputProps } from 'react-native';
import { inputStyles } from './Input.styles';
import CustomIcon from '../Icons/CustomIcon';
import { Colors, Spacing } from '../../theme';

interface SearchInputProps extends TextInputProps {
  containerStyle?: any;
}

/**
 * SearchInput component
 * - Renders a search bar with icon and themed styles
 */
const SearchInput: React.FC<SearchInputProps> = ({ containerStyle, style, ...props }) => (
  <View style={[styles.container, containerStyle]}>
    <CustomIcon name="magnify" size={20} color={Colors.textMuted} style={styles.icon} />
    <RNTextInput
      style={[inputStyles.searchInput, style]}
      placeholderTextColor={Colors.textMuted}
      {...props}
    />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: Colors.tertiary,
    borderRadius: 8,
    paddingHorizontal: Spacing.sm,
    marginVertical: Spacing.xs,
  },
  icon: {
    marginRight: Spacing.xs,
  },
});

export default SearchInput;

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