# Sistema de Filtros para Cuidajá

Este diretório contém exemplos de implementação dos filtros solicitados para a tela de propostas do app Cuidajá.

## 📁 Estrutura

- `FilterBar.jsx` - Componente completo de filtros (modal com todas as opções)
- `ProposalsScreen.jsx` - Tela de exemplo integrando os filtros

## 🎯 Funcionalidades Implementadas

### 1. Ordenação
- **Melhor preço** (crescente/decrescente)
- **Melhor avaliação** (por estrelas)
- **Mais próximo** (por distância)

### 2. Filtros
- **Tipo de profissional** (dropdown com categorias)
- **Apenas verificados** (toggle)
- **Distância máxima** (slider 1-50km)

### 3. Interface
- Barra de filtros compacta com contador
- Modal completo para seleção
- Badges mostrando filtros ativos
- Botões de aplicar e limpar

## 🚀 Como Integrar

### Se for React Native (Expo)

1. **Copie os componentes** para sua pasta `components/`
2. **Instale dependências** se necessário:
```bash
expo install @expo/vector-icons react-native-slider
```

3. **Importe na sua tela**:
```jsx
import FilterBar from './components/FilterBar';
```

4. **Adapte os dados** para usar sua API real

### Se for React Native sem Expo
- Substitua `@expo/vector-icons` por `react-native-vector-icons/Feather`
- Use `Slider` do `@react-native-community/slider`

### Se for React Web
- Adapte os estilos para CSS/SCSS
- Use `onClick` no lugar de `onPress`
- Use `div` no lugar de `View`

## 🔧 Personalização

### Categorias de Profissionais
Edite o array `professionalTypes` em `FilterBar.jsx`:
```js
const professionalTypes = [
  { id: 'physio', label: 'Fisioterapeuta' },
  // Adicione mais categorias conforme necessário
];
```

### Lógica de Filtragem
A função `handleApplyFilters` em `ProposalsScreen.jsx` contém a lógica de filtro. Adapte para sua API:

```js
// Exemplo com API real
const handleApplyFilters = async (filters) => {
  setLoading(true);
  try {
    const response = await api.get('/professionals', { params: filters });
    setFilteredProfessionals(response.data);
  } catch (error) {
    console.error('Erro ao filtrar:', error);
  } finally {
    setLoading(false);
  }
};
```

## 🎨 Estilos

Os estilos estão inline nos componentes. Para melhor organização:

1. **CSS Modules**: Mova para arquivos `.styles.js`
2. **Styled Components**: Converta para `styled-components`
3. **Tailwind**: Use classes com `nativewind`

## 📱 Compatibilidade

- **iOS**: ✅ Testado (simulado)
- **Android**: ✅ Testado (simulado)
- **Web**: ⚠️ Requer adaptações

## 🔄 Próximos Passos

1. **Integrar com API real** - Substituir mock data
2. **Adicionar persistência** - Salvar filtros no AsyncStorage
3. **Otimizar performance** - Virtualizar lista se tiver muitos itens
4. **Testes** - Adicionar testes unitários e de integração

## 📞 Suporte

Para dúvidas ou ajustes, consulte a documentação ou entre em contato com o time de desenvolvimento.