import { useState } from 'react'
import { TagCloudCanvas, type Tag } from 'react-3d-tag-sphere'
import './App.css'

function App() {
    const [enablePulse, setEnablePulse] = useState(false)
    const [mode, setMode] = useState<'sphere' | 'horizontal'>('sphere')

    const tags: Tag[] = [
        { src: 'https://cdn.iconscout.com/icon/free/png-256/react-1-282599.png', size: 60 },
        { src: 'https://cdn.iconscout.com/icon/free/png-256/typescript-1174965.png', size: 60 },
        { src: 'https://cdn.iconscout.com/icon/free/png-256/javascript-2752148-2284965.png', size: 60 },
        { src: 'https://cdn.iconscout.com/icon/free/png-256/html5-40-1175193.png', size: 60 },
        { src: 'https://cdn.iconscout.com/icon/free/png-256/css3-11-1175239.png', size: 60 },
        { src: 'https://cdn.iconscout.com/icon/free/png-256/git-17-1175218.png', size: 60 },
        { src: 'https://cdn.iconscout.com/icon/free/png-256/github-163-761603.png', size: 60 },
        { src: 'https://cdn.iconscout.com/icon/free/png-256/nodejs-6-1174935.png', size: 60 },
    ]

    return (
        <div style={{ width: '100vw', height: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#1a1a1a', color: '#fff' }}>
            <h1>TagCloudCanvas Demo</h1>
            <div style={{ marginBottom: '20px' }}>
                <label>
                    <input
                        type="checkbox"
                        checked={enablePulse}
                        onChange={(e) => setEnablePulse(e.target.checked)}
                    />
                    Enable Pulse (Reset on Leave)
                </label>
                <label style={{ marginLeft: '20px' }}>
                    <input
                        type="checkbox"
                        onChange={(e) => setMode(e.target.checked ? 'horizontal' : 'sphere')}
                    />
                    Horizontal Mode
                </label>
            </div>
            <div style={{ width: '600px', height: '600px', border: '1px solid #333' }}>
                <TagCloudCanvas
                    tags={tags}
                    width={600}
                    height={600}
                    enablePulse={enablePulse}
                    mode={mode}
                />
            </div>
        </div>
    )
}

export default App