/** @format */ import React, { useState } from 'react'; import Block from './style'; import { data as mockData } from '../ModalPhoneNumpad/mockTest'; const CallCardDropDown = ({ hiddenState, selectUserFunc }) => { const [inputValue, setinputValue] = useState(''); return ( <Block onClick={(e) => e.stopPropagation()} hiddenState={hiddenState}> <Block.Input placeholder='Search' hiddenState={hiddenState} onChange={(e) => setinputValue(e.target.value)} /> <Block.Inset hiddenState={hiddenState}> {mockData.map( ({ NAME, UF_PHONE_INNER, LAST_NAME }, index) => (NAME.toLocaleLowerCase().includes( inputValue.toLocaleLowerCase(), ) || LAST_NAME.toLocaleLowerCase().includes( inputValue.toLocaleLowerCase(), ) || UF_PHONE_INNER.toString().includes(inputValue.toString())) && ( <Block.Section key={index} onClick={() => selectUserFunc(UF_PHONE_INNER)}> <p className='name'> {NAME} {LAST_NAME} </p> <p className='phone_number'>{UF_PHONE_INNER}</p> </Block.Section> ), )} </Block.Inset> </Block> ); }; export default CallCardDropDown;