import React from 'react'
import { useTheme, colors } from '../theme'
import Logo from './Logo'
import Button from './Button'

const Header = ({ 
  title = 'GestorEasy',
  showThemeToggle = true,
  actions,
  className = '',
  ...props 
}) => {
  const { theme, currentTheme, switchTheme, availableThemes } = useTheme()
  
  const headerStyles = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '16px 24px',
    backgroundColor: theme.surface,
    borderBottom: `1px solid ${theme.border}`,
    minHeight: '64px'
  }
  
  const leftSectionStyles = {
    display: 'flex',
    alignItems: 'center',
    gap: '16px'
  }
  
  const titleStyles = {
    fontSize: '24px',
    fontWeight: '700',
    color: theme.text,
    margin: 0
  }
  
  const rightSectionStyles = {
    display: 'flex',
    alignItems: 'center',
    gap: '12px'
  }
  
  const themeButtonStyles = {
    padding: '8px 12px',
    fontSize: '12px',
    textTransform: 'uppercase',
    letterSpacing: '0.5px'
  }
  
  const handleThemeChange = () => {
    const currentIndex = availableThemes.indexOf(currentTheme)
    const nextIndex = (currentIndex + 1) % availableThemes.length
    switchTheme(availableThemes[nextIndex])
  }
  
  return (
    <header
      style={headerStyles}
      className={className}
      {...props}
    >
      <div style={leftSectionStyles}>
        <Logo size={40} />
        <h1 style={titleStyles}>{title}</h1>
      </div>
      
      <div style={rightSectionStyles}>
        {actions}
        
        {showThemeToggle && (
          <Button
            variant="ghost"
            size="small"
            onClick={handleThemeChange}
            style={themeButtonStyles}
          >
            {currentTheme === 'light' ? '🌙' : currentTheme === 'dark' ? '🎨' : '☀️'} {currentTheme}
          </Button>
        )}
      </div>
    </header>
  )
}

export default Header