import React from "react";
import PropTypes from "prop-types";
import { Paper, Button, Box } from "@mui/material";
import { useTranslation } from "react-i18next";
import { PaperTitle } from "components/common";
import { usePermissions } from "hooks";

const CacheSettingsComponent = ({ onResetCache }) => {
  const { t } = useTranslation();
  const { sysAdmin } = usePermissions();

  return (
    <Paper variant="outlined">
      <PaperTitle text={t("Settings.Cache.Title")} />
      <Box sx={{ margin: 1 }}>
        <Button variant="outlined" color="secondary" disabled={!sysAdmin} onClick={onResetCache}>
          {t("Settings.Cache.Reset")}
        </Button>
      </Box>
    </Paper>
  );
};

CacheSettingsComponent.propTypes = {
  onResetCache: PropTypes.func.isRequired
};

export default CacheSettingsComponent;
