import { VisibilityOffOutlined, VisibilityOutlined } from "@mui/icons-material";
import { useState } from "react";

import styles from "./PasswordView.module.css";

interface Props {
	value: string;
}

export function PasswordView(props: Props) {
	const [show, setShow] = useState(false);

	function getValue() {
		if (show) {
			return props.value;
		} else {
			return "*".repeat(props.value.length);
		}
	}

	function getIcon() {
		if (show) {
			return <VisibilityOutlined onClick={() => setShow(false)} />;
		} else {
			return <VisibilityOffOutlined onClick={() => setShow(true)} />;
		}
	}

	return (
		<div className={styles.container}>
			<div className={styles.password}>{getValue()}</div>
			<button type="button" className={styles.button}>
				{getIcon()}
			</button>
		</div>
	);
}
