import { actionBadgeStyle } from "@/lib/colors";
import { fmtDate } from "@/lib/format";
import type { Database } from "@/lib/supabase/types";

type HistoryRow = Database["public"]["Tables"]["employee_history"]["Row"];

export function HistorieTab({ history }: { history: HistoryRow[] }) {
  const today = new Date().toISOString().slice(0, 10);

  if (history.length === 0) {
    return <p className="text-sm text-ink-muted">Keine Historieneinträge vorhanden.</p>;
  }

  return (
    <ul className="flex flex-col divide-y divide-border">
      {history.map((h) => {
        const isFuture = h.event_date > today;
        return (
          <li key={h.id} className="py-3">
            <div className="flex flex-wrap items-center gap-2">
              <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${actionBadgeStyle(h.event_type)}`}>{h.event_type}</span>
              <span className="text-sm text-ink-muted">{fmtDate(h.event_date)}</span>
              {isFuture && (
                <span className="rounded-full bg-warning-bg px-2 py-0.5 text-xs font-semibold text-warning-text">
                  ⏱ zukünftig – wirksam ab {fmtDate(h.event_date)}
                </span>
              )}
            </div>
            <p className="mt-1 text-sm text-ink">{h.description}</p>
          </li>
        );
      })}
    </ul>
  );
}