import Link from "next/link";
import { ArrowRight, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/**
 * Small server component the overview can render when `user.onboardingCompletedAt` is null.
 * Pure presentation — pass `completedAt` and it returns null when onboarding is done.
 */
export function OnboardingBanner({ completedAt, userName, className }: { completedAt?: Date | null; userName?: string | null; className?: string }) {
  if (completedAt) return null;
  const first = userName?.trim().split(/\s+/)[0];
  return (
    <div className={cn("flex flex-col gap-3 rounded-lg border border-accent/30 bg-accent-soft/40 px-4 py-3 sm:flex-row sm:items-center", className)}>
      <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-bg shadow-xs">
        <Sparkles className="size-4 text-accent" aria-hidden />
      </div>
      <div className="min-w-0 flex-1 text-[13.5px]">
        <div className="font-medium">{first ? `Welcome, ${first}.` : "Welcome to Fetcha."} Finish setting up in about two minutes.</div>
        <div className="text-fg-muted">Create an API key, run your first request and grab the generated code for your stack.</div>
      </div>
      <Button asChild size="sm" variant="primary" className="shrink-0">
        <Link href="/dashboard/onboarding">
          Continue setup <ArrowRight />
        </Link>
      </Button>
    </div>
  );
}