---
import { translations } from '../data/i18n.js';
const { lang = 'no', data } = Astro.props;
const t = translations[lang].program;
const currentDate = new Date().toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-NO', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
---
{data ? (
  <div class="flex gap-4 flex-col">
    <div class="flex items-center justify-between">
      <h2 class="font-bold text-xl">{t.today}</h2>
      <p>{currentDate}</p>
    </div>
    {Object.entries(data).map(([dayName, items]) => (
      <div class="day">
        <h2>{dayName}</h2>
        <ul>
          {items.map((item) => {
            const price = item.price || item.cost;
            return (
              <li class="item">
                {item.time} - {item.event} - {item.url ? (
                  <a href={item.url} target="_blank" rel="noopener noreferrer">{price}</a>
                ) : (
                  price
                )}
              </li>
            );
          })}
        </ul>
      </div>
    ))}
  </div>
) : (
  <div>No program data available.</div>
)}

<style>
.day {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.day:nth-child(odd) {
  background-color: #F8BC90;
}
.day:nth-child(even) {
  background-color: #0A0F6D;
  color: #fff;
}
.item {
  margin: 5px 0;
}
</style>