"use client";

import { Button } from "@/components/ui/button";
import { useOnboardingStore } from "@/stores/onboarding";
import { useAuthStore } from "@/stores/auth";

export function WelcomeStep() {
  const nextStep = useOnboardingStore((s) => s.nextStep);
  const user = useAuthStore((s) => s.user);

  const greeting = user?.first_name
    ? `Welcome to honeyDue, ${user.first_name}!`
    : "Welcome to honeyDue!";

  return (
    <div className="flex flex-col items-center text-center space-y-6 py-12">
      <div className="space-y-3">
        <h2 className="text-3xl font-bold tracking-tight">{greeting}</h2>
        <p className="text-muted-foreground text-lg max-w-sm mx-auto">
          Your property management companion. Let&apos;s get you set up in just
          a few steps.
        </p>
      </div>

      <Button size="lg" onClick={nextStep} className="mt-4">
        Get Started
      </Button>
    </div>
  );
}
