import React, { memo } from 'react';
import {
  FlatList,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { Feather } from '@expo/vector-icons';

type ResultItem = {
  name: string;
  etat: string;
};

type InterestedMedicinesSectionProps = {
  proposedMeds: string[];
  interestedMed: string;
  setInterestedMed: (value: string) => void;
  selectedEtat: string;
  setShowEtatList: (value: boolean) => void;
  showEtatList: boolean;
  etats: readonly string[] | string[];
  onSelectEtat: (value: string) => void;
  onAddResult: () => void;
  resultList: ResultItem[];
  onRemoveResult: (name: string) => void;
};

const InterestedMedicinesSection = ({
  proposedMeds,
  interestedMed,
  setInterestedMed,
  selectedEtat,
  setShowEtatList,
  showEtatList,
  etats,
  onSelectEtat,
  onAddResult,
  resultList,
  onRemoveResult,
}: InterestedMedicinesSectionProps) => {
  return (
    <>
    </>
  );
};

export default memo(InterestedMedicinesSection);

const styles = StyleSheet.create({
  sectionTitle: {
    marginTop: 20,
    fontWeight: '700',
    fontSize: 15,
    color: '#202124',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 6,
  },
  emptyText: {
    color: '#9CA3AF',
    paddingTop: 8,
  },
  choiceBtn: {
    borderWidth: 1,
    borderColor: '#DADCE0',
    borderRadius: 20,
    paddingHorizontal: 12,
    paddingVertical: 6,
    marginRight: 8,
    backgroundColor: '#fff',
  },
  choiceBtnActive: {
    backgroundColor: '#1A73E8',
  },
  choiceText: {
    color: '#1E293B',
    fontWeight: '500',
  },
  choiceTextActive: {
    color: '#fff',
  },
  input: {
    borderWidth: 1,
    borderColor: '#DADCE0',
    backgroundColor: '#FFFFFF',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 14,
    marginTop: 6,
  },
  dropdown: {
    justifyContent: 'center',
  },
  dropdownText: {
    color: '#202124',
    fontWeight: '500',
  },
  dropdownList: {
    borderWidth: 1,
    borderColor: '#DADCE0',
    borderRadius: 8,
    backgroundColor: '#FFFFFF',
    marginTop: 4,
  },
  dropdownItem: {
    paddingVertical: 10,
    paddingHorizontal: 12,
  },
  dropdownItemActive: {
    backgroundColor: '#EEF2FF',
  },
  dropdownItemText: {
    color: '#202124',
    fontWeight: '500',
  },
  dropdownItemTextActive: {
    color: '#1A73E8',
    fontWeight: '700',
  },
  addBtn: {
    backgroundColor: '#1A73E8',
    borderRadius: 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 14,
    paddingVertical: 12,
  },
  addText: {
    color: '#FFFFFF',
    fontWeight: '700',
    marginLeft: 6,
  },
  resultItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderColor: '#DADCE0',
  },
  resultName: {
    fontWeight: '600',
    color: '#202124',
  },
  resultRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  resultEtat: {
    fontWeight: '500',
    color: '#1A73E8',
    marginRight: 10,
  },
});