import { Link, useParams } from 'react-router';

export default function ProfilAnggotaPage() {
    const { id } = useParams();

    return (
        <>
            <div className="card" style={{ width: 1024, margin: 'auto' }}>
                <div className="card-header">
                    <h3 className="card-title text-center">Profil Anggota</h3>
                </div>
                <div className="card-body">
                    <div id="data-diri">
                        <div className="divider">
                            <div className="divider-text">Data Diri</div>
                        </div>
                        <div className="row mb-3">
                            <div className="col-md-3">
                                <label className="form-label">Anggota ID</label>
                                <input className="form-control border-secondary" disabled />
                            </div>
                            <div className="col-md-3">
                                <label className="form-label">
                                    Nomor KTP<sup className="text-danger">*</sup>
                                </label>
                                <input className="form-control" />
                            </div>
                            <div className="col-md-6">
                                <label className="form-label">
                                    Nama Lengkap (Sesuai KTP)<sup className="text-danger text-lg">*</sup>
                                </label>
                                <input className="form-control" />
                            </div>
                        </div>
                        <div className="row mb-3">
                            <div className="col-md-3">
                                <label className="form-label">Tempat Lahir</label>
                                <input className="form-control" />
                            </div>
                            <div className="col-md-3">
                                <label className="form-label">Tanggal Lahir</label>
                                <input className="form-control" type="date" />
                            </div>
                        </div>
                    </div>
                </div>
                <div className="card-footer d-flex justify-content-between gap-2">
                    <div className="d-flex gap-2">
                        <Link to={`/app/master/anggota/${id}`} className="btn btn-secondary">
                            <i className="ri ri-arrow-left-line me-2" />
                            Kembali
                        </Link>
                    </div>
                    <button className="btn btn-primary">
                        <i className="ri ri-printer-line me-2" />
                        Cetak
                    </button>
                </div>
            </div>
        </>
    );
}
