'use client';

import { useMemo } from 'react';

function greetingForHour(hour: number) {
  if (hour < 12) return 'Good Morning';
  if (hour < 17) return 'Good Afternoon';
  return 'Good Evening';
}

export function DashboardGreeting({ name }: { name: string }) {
  const greeting = useMemo(() => greetingForHour(new Date().getHours()), []);
  const first = name.trim().split(/\s+/)[0] || name;

  return (
    <header className="min-w-0">
      <h1 className="text-[1.65rem] font-extrabold leading-tight tracking-tight text-navy sm:text-3xl">
        {greeting}, {first}
        <span aria-hidden="true"> 👋</span>
      </h1>
      <p className="mt-1.5 max-w-xl text-sm leading-relaxed text-muted-foreground sm:text-[0.95rem]">
        Here&apos;s what&apos;s happening with your store today.
      </p>
    </header>
  );
}