"use client";

import { useOnboardingStore } from "@/stores/onboarding";
import { cn } from "@/lib/utils";

function StepDots() {
  const { currentStep, path } = useOnboardingStore();

  // Total steps depends on path:
  // Create path: Welcome (0) -> Choose (1) -> Create Residence (2) -> First Task (3) -> Complete (4)
  // Join path:   Welcome (0) -> Choose (1) -> Join Residence (2) -> Complete (3)
  // Before path chosen: 4 dots (default)
  const totalSteps = path === "join" ? 4 : 5;

  return (
    <div className="flex items-center justify-center gap-2">
      {Array.from({ length: totalSteps }).map((_, i) => (
        <div
          key={i}
          className={cn(
            "h-2 rounded-full transition-all duration-300",
            i === currentStep
              ? "w-6 bg-primary"
              : i < currentStep
                ? "w-2 bg-primary/60"
                : "w-2 bg-muted-foreground/30"
          )}
        />
      ))}
    </div>
  );
}

export default function OnboardingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-h-screen flex-col items-center bg-background px-4 py-12">
      {/* Logo */}
      <div className="mb-2">
        <h1 className="text-2xl font-bold tracking-tight text-primary">
          honeyDue
        </h1>
      </div>

      {/* Progress dots */}
      <div className="mb-8">
        <StepDots />
      </div>

      {/* Content */}
      <div className="w-full max-w-lg">{children}</div>
    </div>
  );
}
