import React from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {IconFilter} from '@tabler/icons-react-native';
import {BadgeIconButton, InputSearch} from '@components';
import {SetState} from '@interfaces/generic';

import {styles} from './styles';

interface Props {
  searchValue: string;
  onSearch: SetState<string>;
  onFilter?: () => void;
  amountOfFilters?: number;
  placeholder?: string;
  style?: StyleProp<ViewStyle>;
}
export function SearchHeader({
  searchValue,
  onSearch,
  onFilter,
  amountOfFilters,
  placeholder,
  style,
}: Props) {
  return (
    <View style={[styles.container, style]}>
      <InputSearch
        value={searchValue}
        onChangeText={onSearch}
        placeholder={placeholder}
        style={styles.flex}
      />
      {onFilter && (
        <BadgeIconButton
          Icon={IconFilter}
          onIconPress={onFilter}
          value={amountOfFilters || 0}
          variant="secondary"
          badgeStyle={styles.badge}
          containerStyle={styles.filtersContainer}
        />
      )}
    </View>
  );
}