Confetti

import { useState } from "react";
import Confetti from "@/components/ui/confetti";

export function Example1() {
  const [showBasicConfetti, setShowBasicConfetti] = useState(false);
  
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-8">Confetti</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div className="border rounded-lg p-6 shadow-sm">
          <h2 className="text-xl font-semibold mb-4">Basic Confetti</h2>
          <p className="mb-4 text-gray-600">
            Triggers confetti for 5 seconds when button is clicked.
          </p>
          <button 
            type="button"
            onClick={() => setShowBasicConfetti(true)}
            className="px-4 py-2 font-semibold text-white transition-all bg-blue-500 rounded-md hover:bg-blue-600 hover:scale-105 active:scale-95"
          >
            Celebrate!
          </button>
          
          <div className="mt-4 text-sm text-gray-500">
            Status: {showBasicConfetti ? "Confetti active" : "Waiting to celebrate"}
          </div>
          
          <Confetti 
            isActive={showBasicConfetti}
            duration={5000}
            loop={false}
            zIndex={100}
          />
        </div>
      </div>
    </div>
  );
}

export function Example2() {
  const [showLoopingConfetti, setShowLoopingConfetti] = useState(false);

  return <div className="p-8">
      <h1 className="text-3xl font-bold mb-8">Confetti</h1><div className="border rounded-lg p-6 shadow-sm">
          <h2 className="text-xl font-semibold mb-4">Looping Confetti</h2>
          <p className="mb-4 text-gray-600">
            Confetti continues until manually stopped.
          </p>
          <button 
            type="button"
            onClick={() => setShowLoopingConfetti(!showLoopingConfetti)}
            className="px-4 py-2 font-semibold text-white transition-all bg-purple-500 rounded-md hover:bg-purple-600 hover:scale-105 active:scale-95"
          >
            {showLoopingConfetti ? "Stop" : "Start"} Confetti
          </button>
          
          <div className="mt-4 text-sm text-gray-500">
            Status: {showLoopingConfetti ? "Confetti active" : "Confetti inactive"}
          </div>
          
          <Confetti 
            isActive={showLoopingConfetti}
            loop={true}
            zIndex={100}
          />
        </div></div>
}

export function Example3() {
  const [showAutoplayConfetti, setShowAutoplayConfetti] = useState(false);

    return <div className="p-8">
      <h1 className="text-3xl font-bold mb-8">Confetti</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8"><div className="border rounded-lg p-6 shadow-sm">
          <h2 className="text-xl font-semibold mb-4">Auto-Play Confetti</h2>
          <p className="mb-4 text-gray-600">
            This confetti animation starts automatically when component mounts.
          </p>
          <button 
            type="button"
            onClick={() => setShowAutoplayConfetti(!showAutoplayConfetti)}
            className="px-4 py-2 font-semibold text-white bg-green-500 rounded-md hover:bg-green-600 mb-4"
          >
            {showAutoplayConfetti ? "Hide" : "Show"} Component
          </button>
          
          {showAutoplayConfetti && (
            <div className="mt-4 p-4 border border-dashed border-gray-300 rounded-md relative">
              <p>Component with auto-play confetti</p>
              <Confetti autoPlay duration={3000} />
            </div>
          )}
        </div></div></div>
}