src/components/Header.tsx

import React from 'react'
import { useAuth } from '../contexts/AuthContext'
import { useChannels } from '../contexts/ChannelContext'
import { Tv, Menu, LogOut, Users } from 'lucide-react'

interface HeaderProps {
  onToggleChannelList: () => void
  showChannelList: boolean
}

export default function Header({ onToggleChannelList, showChannelList }: HeaderProps) {
  const { logout } = useAuth()
  const { currentChannel, viewerCount } = useChannels()

  return (
    <header className="bg-gray-800 border-b border-gray-700 px-4 py-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <button
            onClick={onToggleChannelList}
            className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
            title={showChannelList ? 'Ocultar lista' : 'Mostrar lista'}
          >
            <Menu className="h-5 w-5 text-gray-300" />
          </button>
          
          <div className="flex items-center space-x-2">
            <Tv className="h-6 w-6 text-primary-500" />
            <h1 className="text-xl font-bold text-white">DaddyTV</h1>
          </div>
        </div>

        <div className="flex items-center space-x-4">
          {currentChannel && (
            <div className="flex items-center space-x-4">
              <div className="text-sm text-gray-300">
                <span className="font-medium">{currentChannel.name}</span>
              </div>
              
              {viewerCount > 1 && (
                <div className="flex items-center space-x-1 text-sm text-gray-400">
                  <Users className="h-4 w-4" />
                  <span>{viewerCount}</span>
                </div>
              )}
            </div>
          )}

          <button
            onClick={logout}
            className="p-2 hover:bg-gray-700 rounded-lg transition-colors text-gray-300 hover:text-white"
            title="Cerrar sesión"
          >
            <LogOut className="h-5 w-5" />
          </button>
        </div>
      </div>
    </header>
  )
}