"use client"

import * as React from "react"
import { CircleCheckIcon } from "lucide-react"
import { toast } from "sonner"
import { Button } from "@/registry/ui/button"
import { Toaster } from "@/registry/ui/sonner"
import { GlassStage } from "./_shared/glass-stage"

export default function SonnerDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      {/* Always-visible glass exhibit */}
      <GlassStage>
        {/* static replica of Sonner toast material classes — keep in sync */}
        <div className="w-full max-w-sm rounded-[var(--radius)] border border-material-border bg-material-regular px-4 py-3 shadow-xl backdrop-blur-xl flex items-start gap-3">
          <CircleCheckIcon className="size-4 mt-0.5 shrink-0 text-green-500" />
          <div className="flex flex-col gap-0.5 min-w-0">
            <p className="text-sm font-medium leading-tight">Changes saved successfully</p>
            <p className="text-xs text-muted-foreground">Your profile has been updated.</p>
          </div>
        </div>
      </GlassStage>

      {/* Interactive demo */}
      <p className="text-xs text-muted-foreground text-center">Try it live</p>
      <div className="flex items-center justify-center">
        <Toaster />
        <div className="flex flex-wrap items-center gap-3">
          <Button variant="outline" onClick={() => toast("Event has been created")}>
            Show toast
          </Button>
          <Button
            variant="outline"
            onClick={() => toast.success("Changes saved successfully")}
          >
            Show success
          </Button>
          <Button
            variant="outline"
            onClick={() => toast.error("Something went wrong")}
          >
            Show error
          </Button>
        </div>
      </div>
    </div>
  )
}