Dialogue box

"use client";

import { useState } from "react";
import { CruiseAvatar } from "@/components/cruise/avatar";
import { CruiseButton } from "@/components/cruise/button";
import { CruiseDialogueBox } from "@/components/cruise/dialogue-box";

const steps = [
  { text: "Welcome to Cruise UI! I'll show you around in three quick steps." },
  { text: "Pick a city theme in the Studio, then tweak the colours, borders and corners." },
  { text: "Copy the prompt into your AI, or install the components into your React app." },
];

export default function DialogueBoxExample() {
  const [key, setKey] = useState(0);
  const [done, setDone] = useState(false);
  if (done) {
    return (
      <CruiseButton variant="secondary" onClick={() => (setDone(false), setKey((k) => k + 1))}>
        Show the tour again
      </CruiseButton>
    );
  }
  return (
    <CruiseDialogueBox
      key={key}
      speaker="Ada"
      portrait={<CruiseAvatar name="Ada Okafor" size="lg" />}
      steps={steps}
      onSkip={() => setDone(true)}
      onFinish={() => setDone(true)}
    />
  );
}