return (
    <div
      style={{
        backgroundColor: "#fff",
        padding: "20px",
        borderRadius: "10px",
        border: "2px solid #ccc",
        boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
      }}
    >
      <Typography
        variant="h2"
        align="center"
        paragraph
        style={{ color: "#515254" }}
      >
        Profiel
      </Typography>
      <Divider style={{ marginBottom: "20px" }} />
      <Grid container spacing={3}>
        <Grid item xs={6}>
          <Paper
            style={{
              padding: "10px",
              border: "2px solid #ccc",
              boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
              borderRadius: "7px",
            }}
          >
            <div
              style={{
                position: "relative",
                display: "inline-block",
                filter: hovered ? "brightness(70%)" : "brightness(100%)",
              }}
              onMouseEnter={() => setHovered(true)}
              onMouseLeave={() => setHovered(false)}
            >
              {profileData?.firstName || profileData?.lastName ? (
                <img
                  src="/assets/images/default-avatar"
                  alt="Gebruikers Avatar"
                  style={{
                    width: "100px",
                    height: "100px",
                    borderRadius: "50%",
                  }}
                />
              ) : (
                generateLetterAvatar(
                  profileData?.firstName,
                  profileData?.lastName
                )
              )}
            </div>

            <TextField
              label="Voornaam"
              defaultValue={profileData?.firstName}
              onChange={(e) => updateProfileData("firstName", e.target.value)}
              fullWidth
              margin="normal"
              disabled={!editMode}
            />
            <TextField
              label="Achternaam"
              defaultValue={profileData?.lastName}
              onChange={(e) => updateProfileData("lastName", e.target.value)}
              fullWidth
              margin="normal"
              disabled={!editMode}
            />

            <Typography variant="h6" paragraph>
              Beperkingen
            </Typography>
            <Autocomplete
              multiple
              id="disabilities"
              options={getDisabilitiesOptions()}
              value={getDisabilitiesValue(profileData)}
              onChange={(_, newValue) =>
                updateSensitiveData("disabilities", newValue)
              }
              disableCloseOnSelect
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Beperkingen"
                  margin="normal"
                  disabled={!editMode}
                />
              )}
            />

            <Typography variant="h6" paragraph>
              Ondersteuningsmiddelen
            </Typography>
            <Autocomplete
              multiple
              id="supportTools"
              options={getSupportToolsOptions()}
              value={getSupportToolsValue(profileData)}
              onChange={(_, newValue) =>
                updateSensitiveData("assistanceTools", newValue)
              }
              disableCloseOnSelect
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Ondersteuningsmiddelen"
                  margin="normal"
                  disabled={!editMode}
                />
              )}
            />

            <Button
              variant="contained"
              color="primary"
              onClick={handleEditClick}
            >
              {editMode ? "Opslaan" : "Bewerken"}
            </Button>
          </Paper>
        </Grid>

        <Grid item xs={6}>
          <Paper
            style={{
              padding: "20px",
              border: "2px solid #ccc",
              boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
              borderRadius: "7px",
            }}
          >
            <Typography variant="h6" paragraph>
              Voorkeursbenadering
              <Tooltip title="Dit geeft aan welke manier u graag benaderd wordt over onderzoeken.">
                <IconButton
                  size="small"
                  style={{ marginLeft: "5px" }}
                  color="primary"
                  aria-label="info"
                >
                  <InfoIcon fontSize="inherit" />
                </IconButton>
              </Tooltip>
            </Typography>
            <Autocomplete
              id="preferredApproachType"
              options={getStandardPreferredApproachOptions()}
              value={getPreferredApproachValue(profileData)}
              onChange={
                (_, newValue) =>
                  updateSensitiveData("preferredApproachType", newValue) // TODO: convert to its respective DTO
              }
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Voorkeursbenadering"
                  margin="normal"
                  disabled={!editMode}
                />
              )}
            />

            <Typography variant="h6" paragraph>
              Commerciële benaderingen
              <Tooltip title="Hiermee geeft u aan of dat u door commerciale bedrijven wil benaderd worden.">
                <IconButton
                  size="small"
                  style={{ marginLeft: "5px" }}
                  color="primary"
                  aria-label="info"
                >
                  <InfoIcon fontSize="inherit" />
                </IconButton>
              </Tooltip>
            </Typography>
            <FormControlLabel
              control={
                <Switch
                  checked={
                    profileData?.sensitiveData?.commercialApproaches ?? false
                  }
                  onChange={() =>
                    updateSensitiveData(
                      "commercialApproaches",
                      !profileData?.sensitiveData?.commercialApproaches
                    )
                  }
                  color="primary"
                  disabled={!editMode}
                />
              }
              label={
                profileData?.sensitiveData?.commercialApproaches ? "Ja" : "Nee"
              }
            />

            <Typography variant="h6" paragraph>
              Beschikbaarheid dagen
              <Tooltip title="We zullen voor 09:00 en 17:00 proberen te bereiken op de geselecteerde dagen.">
                <IconButton
                  size="small"
                  style={{ marginLeft: "5px" }}
                  color="primary"
                  aria-label="info"
                >
                  <InfoIcon fontSize="inherit" />
                </IconButton>
              </Tooltip>
            </Typography>
            <Autocomplete
              multiple
              id="availabilityDays"
              options={getDaysOptions()}
              value={getAvailabilityDaysValue(profileData)}
              onChange={
                (_, newValue) =>
                  updateSensitiveData("availabilityMoments", newValue) // TODO: convert to its respective DTO
              }
              disableCloseOnSelect
              getOptionLabel={(option) => option}
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Beschikbaarheid Dagen"
                  margin="normal"
                  disabled={!editMode}
                />
              )}
            />

            <Button
              variant="contained"
              color="primary"
              onClick={handleEditClick}
            >
              {editMode ? "Opslaan" : "Bewerken"}
            </Button>
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
}