'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: 10,
        padding: '12px 20px',
        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',
              flexDirection: 'column',
              alignItems: 'center',
              gap: 2,
              padding: '10px 18px',
              borderRadius: 14,
              background: isActive ? 'rgba(0,212,255,0.12)' : 'rgba(255,255,255,0.04)',
              border: isActive ? '1px solid rgba(0,212,255,0.3)' : '1px solid rgba(255,255,255,0.06)',
              minWidth: 90,
              flexShrink: 0,
              touchAction: 'manipulation',
              WebkitTapHighlightColor: 'transparent',
              transition: 'all 0.2s ease',
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ fontSize: 18 }}>{room.emoji}</span>
              <span
                style={{
                  fontSize: 14,
                  fontWeight: isActive ? 600 : 400,
                  color: isActive ? 'var(--accent)' : 'var(--text-primary)',
                  whiteSpace: 'nowrap',
                }}
              >
                {room.name}
              </span>
            </div>
            <span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>
              {room.deviceCount} {room.deviceCount === 1 ? 'устройство' : room.deviceCount >= 2 && room.deviceCount <= 4 ? 'устройства' : 'устройств'}
            </span>
          </button>
        )
      })}
    </div>
  )
}
