import { FormControl, InputAdornment, OutlinedInput } from "@mui/material";
import SearchRoundedIcon from '@mui/icons-material/SearchRounded';

export function Search({ value, onChange, onSearch }) {
    return (
        <FormControl sx={{ width: { xs: '100%', md: '100ch' } }} variant="outlined">
            <OutlinedInput
                autoComplete='off'
                size="small"
                id="search"
                placeholder="Cari berita..."
                sx={{ flexGrow: 1 }}
                value={value}
                onChange={onChange}
                onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                        onSearch();
                    }
                }}
                startAdornment={
                    <InputAdornment position="start" sx={{ color: 'text.primary' }}>
                        <SearchRoundedIcon fontSize="small" />
                    </InputAdornment>
                }
                inputProps={{
                    'aria-label': 'search',
                }}
            />
        </FormControl>
    );
}