"use client";

import { useEffect, useState } from "react";

const WEEKDAYS = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
const MONTHS = [
  "Januar", "Februar", "März", "April", "Mai", "Juni",
  "Juli", "August", "September", "Oktober", "November", "Dezember",
];

function greeting(hour: number): string {
  if (hour < 5) return "Noch spät unterwegs";
  if (hour < 11) return "Guten Morgen";
  if (hour < 18) return "Guten Tag";
  return "Guten Abend";
}

export function LiveClock({ name }: { name: string }) {
  // Erst nach dem Mount einen echten Wert setzen, damit Server- und Client-
  // Render beim ersten Aufbau identisch sind (kein Hydration-Mismatch durch
  // unterschiedliche Uhrzeiten) — bis dahin bleibt die Zeile leer.
  const [now, setNow] = useState<Date | null>(null);

  useEffect(() => {
    setNow(new Date());
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  if (!now) return <div className="h-14" />;

  const pad = (n: number) => String(n).padStart(2, "0");

  return (
    <div>
      <h1 className="rk-wordmark text-2xl text-[var(--rk-ink)]">
        {greeting(now.getHours())}, {name.split(" ")[0]}.
      </h1>
      <p className="mt-1.5 text-sm text-[var(--rk-ink-muted)]">
        {WEEKDAYS[now.getDay()]}, {now.getDate()}. {MONTHS[now.getMonth()]} {now.getFullYear()}
        {" · "}
        <span className="tabular-nums">
          {pad(now.getHours())}:{pad(now.getMinutes())}:{pad(now.getSeconds())}
        </span>
      </p>
    </div>
  );
}