import React from 'react';

export default function SajuInputForm({ form, onChange, onSubmit, loading, error }) {
  return (
    <form className="saju-form" onSubmit={onSubmit}>
      <h3 className="saju-h3" style={{ color: 'var(--saju-cream)', marginBottom: '0.5rem' }}>
        사주풀이 시작하기
      </h3>
      <input
        type="text"
        placeholder="이름 (선택)"
        value={form.name}
        onChange={(e) => onChange('name', e.target.value)}
        disabled={loading}
      />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '0.5rem' }}>
        <input type="number" placeholder="년 (1900-2100)" value={form.year}
               onChange={(e) => onChange('year', e.target.value)} disabled={loading} min="1900" max="2100" />
        <input type="number" placeholder="월" value={form.month}
               onChange={(e) => onChange('month', e.target.value)} disabled={loading} min="1" max="12" />
        <input type="number" placeholder="일" value={form.day}
               onChange={(e) => onChange('day', e.target.value)} disabled={loading} min="1" max="31" />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '0.5rem' }}>
        <input type="number" placeholder="시 (선택, 0-23)" value={form.hour}
               onChange={(e) => onChange('hour', e.target.value)} disabled={loading} min="0" max="23" />
        <select value={form.gender} onChange={(e) => onChange('gender', e.target.value)} disabled={loading}>
          <option value="male">남</option>
          <option value="female">여</option>
        </select>
        <select value={form.calendar_type} onChange={(e) => onChange('calendar_type', e.target.value)} disabled={loading}>
          <option value="solar">양력</option>
          <option value="lunar">음력</option>
        </select>
      </div>
      {error && <div className="saju-form__error">{error}</div>}
      <button type="submit" disabled={loading}>
        {loading ? '호령이 풀어보는 중...' : '사주풀이 시작하기 ✦'}
      </button>
    </form>
  );
}