import React from "react";
import PropTypes from "prop-types";
import { Paper, Grid, Chip, Typography } from "@mui/material";
import { getStyles } from "../styles";
import { useTheme } from "@mui/material/styles";
import { useTranslation } from "react-i18next";

const SecurityComponent = ({ userGroups, userRoles }) => {
  const { t } = useTranslation();
  const theme = useTheme();
  const styles = getStyles(theme);
  return (
    <Paper>
      <Grid container>
        <Grid size={{ xs: 12, md: 6 }}>
          <div style={styles.paper}>
            <Typography gutterBottom variant="body1">
              {t("User.Profile.Security.UserGroups")}
            </Typography>
            <div>
              {userGroups.map(g => (
                <Chip key={g.code} style={styles.chip} label={g.name} />
              ))}
            </div>
          </div>
        </Grid>
        <Grid size={{ xs: 12, md: 6 }}>
          <div style={styles.paper}>
            <Typography gutterBottom variant="body1">
              {t("User.Profile.Security.UserRoles")}
            </Typography>
            <div>
              {userRoles.map(r => (
                <Chip key={r.code} style={styles.chip} color="primary" label={r.name} />
              ))}
            </div>
          </div>
        </Grid>
      </Grid>
    </Paper>
  );
};

SecurityComponent.propTypes = {
  userGroups: PropTypes.array.isRequired,
  userRoles: PropTypes.array.isRequired
};

export default SecurityComponent;
