import { MultiSelectDropdown } from 'multiselectpackage';
function App() {
const options = {
"France":[{"name": " Antoine Griezmann",selected: false,id: 454},
           {"name": "Paul Pogba",selected: false,id: 254}],
"Croatia":[{"name": "Luka Modrić",selected: false,id: 354},
           {"name": "Ivan Rakitić",selected: false, id: 442}],
"Argentina":[{"name": "Lionel Messi",selected: false, id: 404}, 
             {"name":"Elena Martínez",selected: false,id: 402}]
};
const backgroundColor ="red";
const label ="Select";
const label2 ="Unselect";
const color ="green";
const disable =true;
const checkboxcolor ="yellow";

const checkboxcolor = "yellow"
const handleSelect = (groupIndex, options) => {
console.log(Select clicked for Group ${groupIndex + 1});
console.log(${JSON.stringify(options)});
};
const handleClear = (groupIndex, options) => {
console.log(Clear clicked for Group ${groupIndex + 1});
console.log(${JSON.stringify(options)});
};
const handleOptionclear = (groupIndex, options) => {
console.log(Unselected a member for group ${groupIndex + 1});
console.log(${JSON.stringify(options)});
};
return(
<>
<MultiSelectDropdown 
options={options}  
onSelect={handleSelect} 
onClear={handleClear} 
onSingleClear={handleOptionclear}
backgroundColor={backgroundColor} 
label={label} 
label2={label2} 
color={color} 
checkboxcolor={checkboxcolor}
disable={disable}
/>
</>
);
}