Auth Welcome

"use client";

import { useId, useState } from "react";
import { cn } from "@/lib/utils";

export interface AuthWelcomeProps {
  avatars?: string[];
  onDone?: (v: { name: string; avatar: string }) => void;
  className?: string;
}

const TONES = ["bg-da-accent", "bg-da-secondary", "bg-da-primary/20", "bg-da-warning/40"];

/** First-run profile setup: pick an emoji avatar from a grid of pastel circles (radio), type a display name, live preview chip, and a “Let’s go” button. */
export function AuthWelcome({ avatars = ["🦊", "🐻", "🐼", "🦉", "🐸", "🐙", "🦄", "🐝"], onDone, className }: AuthWelcomeProps) {
  const id = useId();
  const [avatar, setAvatar] = useState(avatars[0] ?? "🦊");
  const [name, setName] = useState("");

  return (
    <div className={cn("grid min-h-dvh place-items-center bg-da-bg px-4 py-12 text-da-fg", className)}>
      <main className="w-full max-w-md rounded-[32px] bg-da-surface p-8 text-center shadow-da-lg">
        <p className="text-sm font-semibold text-da-primary">Step 2 of 2</p>
        <h1 className="mt-2 font-da-display text-3xl font-extrabold tracking-da-display">Say hi to your team!</h1>
        <p className="mt-1 text-da-muted-fg">Pick an avatar and the name they’ll see.</p>
        <div className="mt-6 flex justify-center">
          <span
            aria-hidden
            className="grid size-24 place-items-center rounded-full bg-da-primary/12 text-5xl transition-[scale] duration-(--da-duration) ease-da-emphasized"
            key={avatar}
          >
            <span className="transition-[scale] duration-(--da-duration-slow) ease-da-emphasized starting:scale-0">{avatar}</span>
          </span>
        </div>
        <fieldset className="mt-6">
          <legend className="sr-only">Choose an avatar</legend>
          <div className="grid grid-cols-4 gap-3">
            {avatars.map((a, i) => (
              <label
                key={a}
                className={cn(
                  "grid aspect-square cursor-pointer place-items-center rounded-full text-3xl transition-[scale,box-shadow] duration-(--da-duration) ease-da-emphasized has-focus-visible:ring-(length:--da-ring-width) has-focus-visible:ring-da-ring",
                  TONES[i % TONES.length],
                  avatar === a ? "scale-110 ring-3 ring-da-primary" : "hover:scale-105",
                )}
              >
                <input
                  type="radio"
                  name={`${id}-a`}
                  value={a}
                  checked={avatar === a}
                  onChange={() => setAvatar(a)}
                  className="sr-only"
                  aria-label={`Avatar ${i + 1}`}
                />
                <span aria-hidden>{a}</span>
              </label>
            ))}
          </div>
        </fieldset>
        <label htmlFor={`${id}-n`} className="mt-6 block text-left text-sm font-semibold">
          Display name
        </label>
        <input
          id={`${id}-n`}
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Ana"
          maxLength={24}
          className="da-focus mt-1.5 h-12 w-full rounded-da-md bg-da-surface-2 px-4 text-[15px] placeholder:text-da-muted-fg focus:bg-da-input"
        />
        <p className="mt-4 text-sm text-da-muted-fg" aria-live="polite">
          Your teammates will see:{" "}
          <span className="inline-flex items-center gap-1.5 rounded-da-pill bg-da-surface-2 px-3 py-1 font-semibold text-da-fg">
            <span aria-hidden>{avatar}</span> {name || "Your name"}
          </span>
        </p>
        <button
          type="button"
          disabled={!name.trim()}
          onClick={() => onDone?.({ name: name.trim(), avatar })}
          className="da-focus da-transition mt-7 h-12 w-full rounded-da-pill bg-da-primary font-semibold text-da-primary-fg shadow-da-sm hover:-translate-y-0.5 disabled:opacity-50 disabled:hover:translate-y-0"
        >
          Let’s go 🚀
        </button>
      </main>
    </div>
  );
}

export default AuthWelcome;