---
// CP-DATA-082 hours_block
import type { BriefHourEntry, DayId } from '../renderer/types';

interface Props {
  schedule: BriefHourEntry[];
}
const { schedule } = Astro.props;

const dayLabels: Record<DayId, string> = {
  mon: 'Lunedì',
  tue: 'Martedì',
  wed: 'Mercoledì',
  thu: 'Giovedì',
  fri: 'Venerdì',
  sat: 'Sabato',
  sun: 'Domenica',
};

const order: DayId[] = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
const sorted = [...schedule].sort(
  (a, b) => order.indexOf(a.day) - order.indexOf(b.day),
);
---
<dl class="hours-block">
  {sorted.map((entry) => (
    <div class="hours-block__row">
      <dt class="hours-block__day">{dayLabels[entry.day]}</dt>
      <dd class="hours-block__time">
        <time>{entry.open}</time> – <time>{entry.close}</time>
      </dd>
    </div>
  ))}
</dl>

<style>
  .hours-block {
    margin: 0;
    max-width: 480px;
  }
  .hours-block__row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border, #e5e0d8);
  }
  .hours-block__row:last-child {
    border-bottom: none;
  }
  .hours-block__day {
    font-weight: 600;
  }
  .hours-block__time {
    margin: 0;
    color: var(--color-text-muted, #5a5a5a);
  }
</style>