import { useState } from 'react';

/**
 * 이 파일이 하는 일: 비밀번호 입력창 + 끝에 "눈" 토글 버튼.
 * 눈을 누르면 가려진 비밀번호(••••)를 잠깐 글자로 볼 수 있다(오타 확인용).
 *
 * 학습 포인트 ① — 왜 재사용 컴포넌트로 뽑나?
 *   로그인·회원가입·비밀번호 변경 등 비밀번호 칸이 여러 곳에 있다. 각자 눈 토글을
 *   복사하면 동작이 조금씩 어긋난다. 한 부품으로 만들어 두면 모든 칸이 똑같이 동작한다.
 *
 * 학습 포인트 ② — 왜 <input>을 그대로 감싸고 나머지 props는 통째로 넘기나(...props)?
 *   이 컴포넌트는 "type만 토글해 주는 얇은 껍데기"다. id·value·onChange·required 같은 건
 *   원래 input에 주던 그대로 넘겨받아 흘려보낸다 — 기존 코드에서 <input>만 이걸로 바꾸면 된다.
 *
 * 학습 포인트 ③ — type="button" 이 중요하다.
 *   폼 안의 버튼은 기본 type이 "submit"이라, 눈을 누르면 폼이 제출돼 버린다.
 *   type="button"으로 명시해 "이 버튼은 제출이 아니라 그냥 클릭"임을 분명히 한다.
 */
export default function PasswordInput({ className = 'input', ...props }) {
  const [show, setShow] = useState(false);

  return (
    <div className="password-wrap">
      <input {...props} type={show ? 'text' : 'password'} className={className} />
      <button
        type="button"
        className="password-toggle"
        onClick={() => setShow((s) => !s)}
        aria-label={show ? '비밀번호 숨기기' : '비밀번호 보기'}
        title={show ? '비밀번호 숨기기' : '비밀번호 보기'}
      >
        <span aria-hidden="true">{show ? '🙈' : '👁️'}</span>
      </button>
    </div>
  );
}
