import React, { useState } from 'react';

export default function LoginForm() {
  const [userId, setUserId] = useState('');

  const handleInputChange = (e) => {
    setUserId(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`로그인 시도: ${userId}`);
  };

  const handleSpecialClick = (msg) => {
    console.log("전달받은 메시지:", msg);
  };

  return (
    <form onSubmit={handleSubmit} style={{ padding: '20px', background: '#f8fafc', borderRadius: '8px' }}>
      <label style={{ display: 'block', marginBottom: '10px' }}>
        아이디:
        <input 
          type="text" 
          value={userId} 
          onChange={handleInputChange} 
          placeholder="아이디를 입력하세요"
          style={{ marginLeft: '10px', padding: '5px' }}
        />
      </label>
      
      <button type="submit" style={{ padding: '8px 16px', background: '#3b82f6', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer', marginRight: '10px' }}>로그인</button>

      <button type="button" onClick={() => handleSpecialClick('비밀번호 찾기')} style={{ padding: '8px 16px', background: '#64748b', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
        비밀번호를 잊으셨나요?
      </button>
    </form>
  );
}