import React, { useState } from 'react'
import { SceneCard } from 'avanza-ui'

const scenes = [
  { id: 1, name: 'Escena Principal', layout: '👤' },
  { id: 2, name: 'Presentación', layout: '👥' },
  { id: 3, name: 'Pantalla Compartida', layout: '🖥️' }
]

const Sidebar: React.FC = () => {
  const [activeScene, setActiveScene] = useState(1)

  return (
    <div>
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: '16px',
        paddingBottom: '12px',
        borderBottom: '1px solid var(--au-border-dark)'
      }}>
        <h2 style={{
          fontSize: '14px',
          fontWeight: '700',
          color: 'var(--au-text-primary)',
          textTransform: 'uppercase',
          letterSpacing: '0.5px'
        }}>
          Escenas
        </h2>
        <button style={{
          width: '24px',
          height: '24px',
          borderRadius: 'var(--au-radius-sm)',
          border: '1px solid var(--au-border-dark)',
          background: 'var(--au-gray-700)',
          color: 'var(--au-text-primary)',
          cursor: 'pointer',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '16px',
          transition: 'all 0.2s ease'
        }}>
          +
        </button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
        {scenes.map(scene => (
          <SceneCard
            key={scene.id}
            title={scene.name}
            active={activeScene === scene.id}
            onClick={() => setActiveScene(scene.id)}
            preview={
              <div style={{
                fontSize: '32px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}>
                {scene.layout}
              </div>
            }
          />
        ))}
      </div>
    </div>
  )
}

export default Sidebar