import {
  Datagrid,
  DateField,
  List,
  SearchInput,
  TextField,
  useThemeConfig,
  useTranslate
} from '@applica-software-guru/react-admin';
import { Alert } from '@mui/material';

function AlertBox() {
  const { spacing } = useThemeConfig();
  const translate = useTranslate();
  return (
    <Alert sx={{ p: spacing, m: spacing }} severity="info">
      {translate('resources.entities/device.alert')}
    </Alert>
  );
}
function DeviceList() {
  return (
    <List perPage={25} filters={[<SearchInput key="keyword" source="keyword" alwaysOn />]}>
      <AlertBox />
      <Datagrid rowClick="edit">
        <TextField source="id" />
        <TextField source="code" />
        <DateField source="registrationDate" showTime />
      </Datagrid>
    </List>
  );
}

export { DeviceList };