import React from 'react';

export default function HubFormModal({
  showHubModal,
  setShowHubModal,
  hubFormData,
  setHubFormData,
  handleSaveHub,
  isEditMode
}) {
  if (!showHubModal) return null;

  return (
    <div className="modal-overlay active">
      <div className="modal-content">
        <div className="modal-header">
          <h2>{hubFormData.id ? 'Edit' : 'Tambah'} Rumah Ibadah</h2>
          <button className="close-btn" onClick={() => setShowHubModal(false)}>&times;</button>
        </div>
        <div className="modal-body">
          <form onSubmit={handleSaveHub} style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
            <div className="form-group">
              <label>Nama Rumah Ibadah</label>
              <input type="text" className="form-control" value={hubFormData.name} onChange={e => setHubFormData({...hubFormData, name: e.target.value})} required />
            </div>
            <div className="form-group">
              <label>Tipe</label>
              <select className="form-control" value={hubFormData.type} onChange={e => setHubFormData({...hubFormData, type: e.target.value})}>
                <option value="Mosque">Masjid</option>
                <option value="Church">Gereja</option>
                <option value="Temple">Pura</option>
                <option value="Vihara">Vihara</option>
                <option value="Other">Lainnya</option>
              </select>
            </div>
            <div className="form-group">
              <label>Radius Jangkauan (Meter)</label>
              <input type="number" className="form-control" value={hubFormData.radius_meter} onChange={e => setHubFormData({...hubFormData, radius_meter: e.target.value})} required />
            </div>
            <div className="form-group">
              <label>Nomor Kontak PIC</label>
              <input type="text" className="form-control" value={hubFormData.pic_phone || ''} onChange={e => setHubFormData({...hubFormData, pic_phone: e.target.value})} placeholder="Contoh: 08123456789" />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
              <div className="form-group">
                <label>Latitude</label>
                <input type="text" className="form-control" value={hubFormData.lat} readOnly />
              </div>
              <div className="form-group">
                <label>Longitude</label>
                <input type="text" className="form-control" value={hubFormData.lng} readOnly />
              </div>
            </div>
            {isEditMode && (
              <button type="submit" className="btn btn-primary" style={{ marginTop: '10px' }}>
                <i className="fas fa-save"></i> Simpan
              </button>
            )}
          </form>
        </div>
      </div>
    </div>
  );
}