import { legendShades, type CalendarDay } from "./calendar-model";

export function CalendarLegend({
  days,
  color,
  label,
  shades: suppliedShades,
}: {
  days: CalendarDay[];
  color: string;
  label: string;
  shades?: string[];
}) {
  const shades = suppliedShades ?? legendShades(days, color);
  return (
    <div
      className="ds-calendar-legend"
      role="group"
      aria-label={`${label} legend`}
    >
      <div className="ds-legend-scale">
        <span>0 / Upcoming</span>
        <span
          className="ds-legend-swatches"
          role="img"
          aria-label={
            shades.length > 2
              ? "Empty, then increasing partial progress through complete"
              : shades.length === 2
                ? "Empty or complete"
                : "Empty"
          }
        >
          {shades.map((shade) => (
            <span
              key={shade}
              className="ds-legend-swatch"
              style={{ backgroundColor: shade }}
            />
          ))}
        </span>
        {shades.length > 1 && <span>Complete</span>}
      </div>
      <span className="ds-legend-neutral">
        <span
          className="ds-legend-swatch ds-legend-swatch--not-due"
          aria-hidden="true"
        />
        Not scheduled
      </span>
    </div>
  );
}
