/**
 * EmptyState Component
 *
 * Displays a welcome message for new users with no projects.
 * Provides call-to-action to create first project.
 *
 * @see Issue #53
 */

'use client';

import { Rocket, Bot, Settings } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Link } from '@/lib/i18n/routing';

export interface EmptyStateProps {
  /** User's first name for personalization */
  userName?: string;
  /** Additional CSS classes */
  className?: string;
}

export function EmptyState({ userName = 'there', className }: EmptyStateProps) {
  return (
    <Card className={className}>
      <CardContent className="py-12 text-center">
        <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
          <Rocket className="h-8 w-8 text-primary" />
        </div>

        <h2 className="text-2xl font-bold">Welcome to Syndarix, {userName}!</h2>
        <p className="mx-auto mt-2 max-w-md text-muted-foreground">
          Get started by creating your first project. Our AI agents will help you
          turn your ideas into reality.
        </p>

        <Button size="lg" asChild className="mt-6">
          <Link href="/projects/new">Create Your First Project</Link>
        </Button>

        <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
          <Link
            href="/agents"
            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary"
          >
            <Bot className="h-4 w-4" />
            Set up AI agent types
          </Link>
          <Link
            href="/settings"
            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary"
          >
            <Settings className="h-4 w-4" />
            Configure your account
          </Link>
        </div>
      </CardContent>
    </Card>
  );
}