import { useState } from 'react';
import { Icon } from '../../Atoms/Icon/Icon';
import { Avatar } from '../../Atoms/Avatar/Avatar';
import { Typography } from '../../Atoms/Typography/Typography';

export const HeaderConBuscador = ({
  searchPlaceholder = 'Buscar empleados, reportes, configuraciones...',
  userName,
  userAvatar,
  notificationCount = 0,
  onSearch,
  onNotificationClick,
  onUserClick,
  className = '',
  ...props
}) => {
  const [searchValue, setSearchValue] = useState('');

  const handleSearchChange = (e) => {
    const value = e.target.value;
    setSearchValue(value);
    if (onSearch) {
      onSearch(value);
    }
  };

  const handleSearchSubmit = (e) => {
    e.preventDefault();
    if (onSearch) {
      onSearch(searchValue);
    }
  };

  return (
    <header
      className={`bg-white border-b border-gray-200 ${className}`}
      {...props}
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Barra de búsqueda */}
          <div className="flex-1 max-w-2xl mr-8">
            <form onSubmit={handleSearchSubmit} className="relative">
              <input
                type="text"
                value={searchValue}
                onChange={handleSearchChange}
                placeholder={searchPlaceholder}
                className="w-full pl-4 pr-12 py-2.5 bg-slate-50 border border-gray-200 rounded-lg 
                         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                         text-body-md color-gray-700 placeholder:color-gray-400"
              />
              <button
                type="submit"
                className="absolute right-3 top-1/2 transform -translate-y-1/2 
                         hover:opacity-70 transition-opacity"
                aria-label="Buscar"
              >
                <Icon 
                  name="MagnifyingGlassIcon" 
                  variant="24-outline" 
                  size={20} 
                  className="color-gray-400" 
                />
              </button>
            </form>
          </div>

          {/* Notificaciones y Perfil */}
          <div className="flex items-center space-x-6">
            {/* Icono de notificaciones */}
            {notificationCount !== undefined && (
              <button
                onClick={onNotificationClick}
                className="flex items-center space-x-2 p-2 hover:bg-gray-100 rounded-lg transition-colors"
                aria-label="Notificaciones"
              >
                <Icon 
                  name="BellIcon" 
                  variant="24-outline" 
                  size={24} 
                  className="color-gray-600" 
                />
                {notificationCount > 0 && (
                  <span
                    className="px-2 py-0.5 min-w-[20px] h-5 
                             text-white rounded-full flex items-center justify-center
                             text-body-sm-14 font-medium"
                    style={{ 
                      backgroundColor: '#6D3856',
                      borderRadius: '12px'
                    }}
                  >
                    {notificationCount > 9 ? '9+' : notificationCount}
                  </span>
                )}
              </button>
            )}

            {/* Perfil de usuario */}
            {userName && (
              <button
                onClick={onUserClick}
                className="flex items-center space-x-3 hover:bg-gray-50 
                         rounded-lg px-2 py-1.5 transition-colors"
                aria-label="Perfil de usuario"
              >
                <Avatar
                  src={userAvatar}
                  name={userName}
                  size="medium"
                  variant="circle"
                />
                <Typography
                  variant="body-md"
                  className="color-teal font-medium hidden sm:block"
                >
                  {userName}
                </Typography>
                <Icon
                  name="ChevronDownIcon"
                  variant="24-outline"
                  size={20}
                  className="color-gray-500 hidden sm:block"
                />
              </button>
            )}
          </div>
        </div>
      </div>
    </header>
  );
};

export default HeaderConBuscador;

