import React from "react";
import { IconButton } from "@mui/material";
import { Visibility as VisibilityIcon, VisibilityOff as VisibilityOffIcon } from "@mui/icons-material";
import { useSensitiveInfo } from "../../hooks";

const SensitiveInfoToggle = () => {
  const { enabled, onSensitiveInfoEnabled } = useSensitiveInfo();

  const handleChange = () => onSensitiveInfoEnabled(!enabled);

  return (
    <IconButton aria-label="sensitive-info-toggle" color="inherit" onClick={handleChange}>
      {enabled ? <VisibilityOffIcon /> : <VisibilityIcon />}
    </IconButton>
  );
};

export default SensitiveInfoToggle;
