import { Head } from '@inertiajs/react';
import TataLetakPublik from '@/tata-letak/TataLetakPublik';
import { tanggalIndonesia } from '@/lib/format';

interface Props {
    pesan: string;
    tanggal_buka: string | null;
    tanggal_tutup: string | null;
    wa_tanya: string | null;
    judul: string;
}

export default function Tutup({ pesan, tanggal_buka, tanggal_tutup, wa_tanya, judul }: Props) {
    return (
        <TataLetakPublik>
            <Head title={judul} />

            <div className="kartu">
                <h1>Pendaftaran belum dibuka</h1>

                <div className="spanduk spanduk--info" role="status">
                    <p className="tanpa-jarak-bawah">{pesan}</p>
                </div>

                {tanggal_buka && (
                    <dl className="rincian jarak-atas">
                        <dt>Dibuka</dt>
                        <dd>{tanggalIndonesia(tanggal_buka)}</dd>

                        {tanggal_tutup && (
                            <>
                                <dt>Ditutup</dt>
                                <dd>{tanggalIndonesia(tanggal_tutup)}</dd>
                            </>
                        )}
                    </dl>
                )}

                <hr className="pisah" />

                <h2>Sudah pernah mendaftar?</h2>
                <p>
                    Nomor pendaftaran Anda tetap berlaku. Status dan catatan panitia
                    dapat dilihat kapan saja.
                </p>

                <div className="tombol-baris">
                    <a className="tombol tombol--utama" href="/cek-status">
                        Cek status pendaftaran
                    </a>

                    {wa_tanya && (
                        <a className="tombol tombol--kedua" href={wa_tanya} rel="noopener">
                            Hubungi panitia
                        </a>
                    )}
                </div>
            </div>
        </TataLetakPublik>
    );
}