RewardCategories

import React, { useState, useEffect } from 'react';
import {
    CashIcon, CoinsIcon, CouponsIcon, SpinIcon,
    FloatingParticles, Confetti,
    Button, Card, Modal,
    RewardCategories
} from '@/components/ui/reward-categories';

const App = () => {
    const [showModal, setShowModal] = useState(false);
    const [showConfetti, setShowConfetti] = useState(false);

    useEffect(() => {
        if (showConfetti) {
            const timer = setTimeout(() => setShowConfetti(false), 4000);
            return () => clearTimeout(timer);
        }
    }, [showConfetti]);

    return (
        <div className="relative min-h-screen bg-gradient-to-b from-[#2a004a] to-[#111] text-white p-8 font-['Inter'] overflow-hidden">
            <FloatingParticles />
            {showConfetti && <Confetti />}

            <div className="relative z-10">
                <header className="text-center mb-12">
                    <h1 className="text-5xl font-extrabold tracking-tight">UI Component Library</h1>
                    <p className="text-purple-300 mt-2">A showcase of high-quality, remixable React components.</p>
                </header>

                <div className="space-y-12 max-w-3xl mx-auto">
                    <Card>
                        <h3 className="text-2xl font-bold mb-4 text-center">Icons</h3>
                        <div className="flex justify-center items-center gap-6 p-4">
                            <CashIcon /> <CoinsIcon /> <CouponsIcon /> <SpinIcon />
                        </div>
                    </Card>

                    <Card>
                        <h3 className="text-2xl font-bold mb-4 text-center">Buttons</h3>
                        <div className="flex justify-center items-center gap-4 p-4">
                            <Button variant="primary">Primary</Button>
                            <Button variant="secondary">Secondary</Button>
                            <Button variant="special">Special</Button>
                        </div>
                    </Card>
                    
                    <Card>
                        <h3 className="text-2xl font-bold mb-4 text-center">Modal & Effects</h3>
                        <div className="flex justify-center items-center gap-4 p-4">
                            <Button onClick={() => setShowModal(true)}>Show Modal</Button>
                            <Button onClick={() => setShowConfetti(true)}>Launch Confetti</Button>
                        </div>
                    </Card>

                    <div>
                         <h3 className="text-2xl font-bold mb-4 text-center">Widgets</h3>
                         <RewardCategories onArtifactClick={(label) => alert(`${label} clicked!`)} />
                    </div>
                </div>
            </div>

            <Modal show={showModal} onClose={() => setShowModal(false)} title="Example Modal">
                <p>This is a reusable modal component. You can put any content you like in here.</p>
                <div className="mt-4"><CoinsIcon className="w-16 h-16 mx-auto" /></div>
            </Modal>
        </div>
    );
};

export default App;