// mui
import { IconButton, Container, Grid, Stack, Typography } from '@mui/material';
// components
import Page from '../../components/Page';
import Iconify from '../../components/Iconify';
// utils
import useSettings from '../../hooks/useSettings';
// section
import CardPersonalInformation from '../../sections/alarm-center/user-profile/CardPersonalInformation';
import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
import CardPolicyNumber from '../../sections/alarm-center/user-profile/CardPolicyNumber';
import CardBenefitSummary from '../../sections/alarm-center/user-profile/CardBenefitSummary';
import CardClaimHistory from '../../sections/alarm-center/user-profile/CardClaimHistory';
// react
import { useNavigate } from 'react-router';

// ----------------------------------------------------------------------

export default function UserProfile() {
  const { themeStretch } = useSettings();
  const navigate = useNavigate();

  return (
    <Page title="Profile Peserta Jessica Lie">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
          <IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate(-1)}>
            <Iconify icon="heroicons-outline:arrow-narrow-left" />
          </IconButton>
          <Typography variant="h5">Profil Peserta</Typography>
        </Stack>
        <Grid container spacing={2}>
          {/* Row 1 */}
          <Grid item xs={12} md={6}>
            <Grid container spacing={2}>
              {/* Item 1 */}
              <Grid item xs={12} md={12}>
                <CardPersonalInformation />
              </Grid>
              {/* Item 2 */}
              <Grid item xs={12} md={12}>
                <CardFamilyInformation />
              </Grid>
            </Grid>
          </Grid>
          {/* Row 2 */}
          <Grid item xs={12} md={6}>
            <Grid container spacing={2}>
              {/* Item 1 */}
              <Grid item xs={12}>
                <CardPolicyNumber />
              </Grid>
              {/* Item 2 */}
              <Grid item xs={12}>
                <CardClaimHistory />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Container>
    </Page>
  );
}