Toast

"use client";

import { CruiseButton } from "@/components/cruise/button";
import { CruiseToast } from "@/components/cruise/toast";
import { CruiseToaster, useCruiseToast } from "@/components/cruise/toaster";

function SaveButtons() {
  const { toast } = useCruiseToast();
  return (
    <div className="flex flex-wrap gap-3">
      <CruiseButton variant="secondary" onClick={() => toast({ tone: "success", title: "Saved", description: "Your changes are live." })}>
        Save changes
      </CruiseButton>
      {/* One toast can go somewhere else. */}
      <CruiseButton
        variant="secondary"
        onClick={() => toast({ tone: "info", title: "Copied", description: "Link copied.", position: "bottom-center" })}
      >
        Copy link
      </CruiseButton>
    </div>
  );
}

export default function ToastExample() {
  return (
    // Wrap your app once; position: top-left | top-center | top-right |
    // bottom-left | bottom-center | bottom-right (default).
    <CruiseToaster position="top-right">
      <div className="flex flex-col gap-6">
        <SaveButtons />
        <CruiseToast tone="danger" title="Something went wrong">
          Try again.
        </CruiseToast>
      </div>
    </CruiseToaster>
  );
}