/**
 * WelcomeHeader Component
 *
 * Displays a personalized welcome message for the dashboard.
 *
 * @see Issue #53
 */

'use client';

import { Plus } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Link } from '@/lib/i18n/routing';
import { useAuth } from '@/lib/auth/AuthContext';

export interface WelcomeHeaderProps {
  /** Additional CSS classes */
  className?: string;
}

export function WelcomeHeader({ className }: WelcomeHeaderProps) {
  const { user } = useAuth();

  // Get first name for greeting
  const firstName = user?.first_name || user?.email?.split('@')[0] || 'there';

  // Get time-based greeting
  const getGreeting = () => {
    const hour = new Date().getHours();
    if (hour < 12) return 'Good morning';
    if (hour < 18) return 'Good afternoon';
    return 'Good evening';
  };

  return (
    <div className={className}>
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">
            {getGreeting()}, {firstName}
          </h1>
          <p className="mt-1 text-muted-foreground">
            Here&apos;s what&apos;s happening with your projects today.
          </p>
        </div>
        <Button asChild>
          <Link href="/projects/new">
            <Plus className="mr-2 h-4 w-4" />
            Create Project
          </Link>
        </Button>
      </div>
    </div>
  );
}