const greetingForHour = (h: number) =>
  h < 5 ? "Up early" : h < 12 ? "Good morning" : h < 18 ? "Good afternoon" : "Good evening";

export function DashboardGreeting({ firstName }: { firstName: string }) {
  const now = new Date();
  const greeting = greetingForHour(now.getHours());
  const today = now.toLocaleDateString(undefined, {
    weekday: "long",
    month: "long",
    day: "numeric",
  });

  return (
    <div>
      <h1 className="serif text-[26px] sm:text-[30px] leading-tight tracking-tight">
        {greeting}
        {firstName && `, ${firstName}`}.
      </h1>
      <p className="muted mt-1 text-[13px]" suppressHydrationWarning>
        {today}
      </p>
    </div>
  );
}