// src/Components/FormPO/Step3PekerjaanOrtu.jsx

import React from 'react';

const Step3PekerjaanOrtu = ({ 
    data, setData, combinedErrors, InputField, 
    penghasilanOptions 
}) => {
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 border-2 border-slate-100 rounded-xl bg-slate-50">
            <h3 className="md:col-span-2 text-xl font-bold text-indigo-700 border-b pb-2 mb-4">
                Pendidikan, Pekerjaan & Orang Tua
            </h3>
            
            <InputField label="Perguruan Tinggi Asal" name="perguruan_tinggi_asal" value={data.perguruan_tinggi_asal} onChange={(value) => setData('perguruan_tinggi_asal', value)} />
            
            <InputField label="Pekerjaan Saat Ini" name="pekerjaan" value={data.pekerjaan} onChange={(value) => setData('pekerjaan', value)} />
            
            <InputField label="Nama Instansi/Perusahaan" name="instansi_pekerjaan" value={data.instansi_pekerjaan} onChange={(value) => setData('instansi_pekerjaan', value)} />
            
            <InputField label="Perkiraan Penghasilan Per Bulan" name="penghasilan" type="select" value={data.penghasilan} onChange={(value) => setData('penghasilan', value)}>
                <option value="">Pilih Penghasilan</option>
                {penghasilanOptions.map((ph) => (<option key={ph} value={ph}>{ph}</option>))}
            </InputField>

            {/* Input Fields Step 3 - Orang Tua */}
            <div className="md:col-span-2 pt-4 border-t border-slate-200">
                <h4 className="text-lg font-semibold text-gray-700 mb-4">Data Orang Tua (Wajib Nama Ibu/Ayah)</h4>
            </div>
            
            <InputField label="Nama Ibu Kandung *" name="nama_ibu" required value={data.nama_ibu} onChange={(value) => setData('nama_ibu', value)} error={combinedErrors.nama_ibu} />
            <InputField label="NIK Ibu" name="nik_ibu" type="text" placeholder="16 digit" value={data.nik_ibu} onChange={(value) => setData('nik_ibu', value)} />
            <InputField label="Nama Ayah *" name="nama_ayah" required value={data.nama_ayah} onChange={(value) => setData('nama_ayah', value)} error={combinedErrors.nama_ayah} />
            <InputField label="NIK Ayah" name="nik_ayah" type="text" placeholder="16 digit" value={data.nik_ayah} onChange={(value) => setData('nik_ayah', value)} />
        </div>
    );
};

export default Step3PekerjaanOrtu;