import { useAuthStore } from '../store/useAuthStore';

function getGreeting() {
  const h = new Date().getHours();
  if (h >= 5 && h < 12) return 'Good Morning';
  if (h >= 12 && h < 17) return 'Good Afternoon';
  if (h >= 17 && h < 21) return 'Good Evening';
  return 'Good Night';
}

export function Header() {
  const user = useAuthStore((s) => s.user);
  const rawName = user?.dispName || user?.username || 'User';
  const displayName = rawName.replace(/(^|\s)(\p{L})/gu, (match) => match.toUpperCase());

  const dateStr = new Date().toLocaleDateString('en-US', {
    weekday: 'long', month: 'long', day: 'numeric',
  });

  return (
    <header className="mb-8">
      <div>
        <p className="text-xs font-medium text-gray-400 uppercase tracking-wider mb-1.5">
          {dateStr}
        </p>
        <h1 className="text-[22px] font-semibold text-gray-900 tracking-tight leading-tight">
          {getGreeting()},{' '}
          <span>{displayName}</span>
        </h1>
      </div>
    </header>
  );
}
