---
export interface Props {
	targetDate: string;
	label?: string;
}

const { targetDate, label } = Astro.props;
---

<div class="flex flex-row items-start text-left text-base gap-2">
    <span class="text-foreground"
        >{label && `${label} | `}{
            new Date(targetDate).toLocaleDateString()
        }</span
    >
    <span id="dday-label">D-Day</span>
</div>

<script define:vars={{ targetDate }}>
    const today = new Date();
    const target = new Date(targetDate);
    const diffTime = target.getTime() - today.getTime();
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    let label = "D-Day";
    if (diffDays > 0) label = `D-${diffDays}`;
    else if (diffDays < 0) label = `D+${Math.abs(diffDays)}`;

    const el = document.getElementById("dday-label");
    if (el) el.textContent = label;
</script>