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

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

<div class="flex flex-col items-end text-right text-sm">
  <span id="dday-label">D-Day</span>
  <span class="text-muted-foreground">{label} | {new Date(targetDate).toDateString()}</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>