import { ChangeEventHandler } from 'react';
import { TextField } from '@mui/material';

const SearchBox = ({ placeholder, onChange }:{placeholder:string,onChange:ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement, Element>}) => {
  return (
    <TextField
      variant="outlined"
      placeholder={placeholder || "جستجو کنید..."}
      onChange={onChange}
      fullWidth
      
      sx={{
        '& .MuiOutlinedInput-root': {
          borderRadius: '16px', // گرد کردن لبه‌ها برای ظاهر مدرن
          backgroundColor: '#f5f5f5',
          '& fieldset': {
            borderColor: 'transparent', // حذف خط پیش‌فرض
          },
          '&:hover fieldset': {
            borderColor: '#1976d2',
          },
          '&.Mui-focused fieldset': {
            borderColor: '#1976d2',
          },
        },
      }}
    />
  );
};

export default SearchBox;