'use client'

interface Room {
  id: string
  name: string
  emoji: string
  deviceCount: number
}

interface RoomTabsProps {
  rooms: Room[]
  active: string
  onChange: (id: string) => void
}

export default function RoomTabs({ rooms, active, onChange }: RoomTabsProps) {
  return (
    <div
      style={{
        display: 'flex',
        gap: 8,
        padding: '14px 24px',
        overflowX: 'auto',
        flexShrink: 0,
        WebkitOverflowScrolling: 'touch' as any,
        scrollbarWidth: 'none',
        msOverflowStyle: 'none',
      }}
    >
      {rooms.map(room => {
        const isActive = active === room.id
        return (
          <button
            key={room.id}
            onClick={() => onChange(room.id)}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 8,
              padding: '10px 20px',
              borderRadius: 16,
              background: isActive
                ? 'linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.12))'
                : 'rgba(255,255,255,0.03)',
              border: isActive
                ? '1px solid rgba(129,140,248,0.25)'
                : '1px solid rgba(255,255,255,0.05)',
              minWidth: 'fit-content',
              flexShrink: 0,
              transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
              boxShadow: isActive ? '0 4px 16px rgba(99,102,241,0.1)' : 'none',
            }}
          >
            <span style={{ fontSize: 18 }}>{room.emoji}</span>
            <span
              style={{
                fontSize: 14,
                fontWeight: isActive ? 600 : 500,
                color: isActive ? '#a5b4fc' : 'var(--text-primary)',
                whiteSpace: 'nowrap',
              }}
            >
              {room.name}
            </span>
            <span style={{
              fontSize: 11,
              color: isActive ? 'rgba(165,180,252,0.6)' : 'var(--text-tertiary)',
              fontWeight: 500,
            }}>
              {room.deviceCount}
            </span>
          </button>
        )
      })}
    </div>
  )
}