import { eye, eyeSlash } from "@simplybusiness/icons";
import { Icon } from "../Icon";

export interface ShowHideButtonProps {
  show?: boolean;
  onClick: () => void;
}

export const ShowHideButton = ({
  show = false,
  onClick,
}: ShowHideButtonProps) => (
  <button
    className="mobius-password-field__show-button"
    type="button"
    onClick={e => {
      e.preventDefault();
      onClick();
    }}
    aria-label={`${show ? "Hide" : "Show"} password`}
    data-testid="show-hide-button"
  >
    <Icon icon={show ? eyeSlash : eye} aria-hidden="true" />
  </button>
);
