export function HomeTopbar({
  activeTab,
  onTabChange,
  searchValue,
  onSearchChange,
  isWideDesktop = false,
  isDesktop = false,
  isTablet = false,
  isMobile = false,
}) {
  const tabs = [
    { id: 'messages', label: 'Mensagens' },
    { id: 'calls', label: 'Ligacoes' },
  ];

  const gridTemplateColumns = isMobile
    ? '1fr'
    : isWideDesktop
      ? 'max-content minmax(180px, 220px) minmax(280px, 1fr) max-content'
      : isDesktop || isTablet
        ? 'repeat(2, minmax(0, 1fr))'
        : '1fr';

  return (
    <header
      style={{
        display: 'grid',
        gridTemplateColumns,
        gap: '1rem',
        alignItems: 'center',
      }}
    >
      <div
        style={{
          display: 'inline-flex',
          padding: '0.35rem',
          borderRadius: '18px',
          background: 'rgba(0, 49, 80, 0.06)',
          gap: '0.35rem',
          width: isMobile ? '100%' : 'fit-content',
          justifyContent: isMobile ? 'space-between' : 'flex-start',
          minWidth: 0,
        }}
      >
        {tabs.map((tab) => {
          const isActive = tab.id === activeTab;

          return (
            <button
              key={tab.id}
              type="button"
              onClick={() => onTabChange(tab.id)}
              style={{
                border: 'none',
                borderRadius: '14px',
                padding: '0.8rem 1rem',
                background: isActive ? 'var(--color-primary)' : 'transparent',
                color: isActive ? '#fff' : 'var(--color-primary)',
                fontWeight: 700,
              }}
            >
              {tab.label}
            </button>
          );
        })}
      </div>

      <div
        style={{
          padding: '0.9rem 1.1rem',
          borderRadius: '18px',
          background: '#fff',
          border: '1px solid var(--color-border)',
          color: 'var(--color-text-soft)',
          fontWeight: 600,
          width: isMobile ? '100%' : 'auto',
          minWidth: 0,
        }}
      >
        Sexta, 19 de marco
      </div>

      <input
        type="search"
        placeholder="Buscar conversas, contatos ou protocolos"
        value={searchValue}
        onChange={(event) => onSearchChange(event.target.value)}
        style={{
          width: '100%',
          border: '1px solid var(--color-border)',
          borderRadius: '18px',
          padding: '0.95rem 1rem',
          background: '#fff',
          outline: 'none',
          minWidth: 0,
        }}
      />

      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '0.9rem',
          justifySelf: isMobile ? 'stretch' : 'end',
          justifyContent: isMobile ? 'space-between' : 'flex-end',
          width: isMobile ? '100%' : 'auto',
          minWidth: 0,
        }}
      >
        <div style={{ textAlign: 'right', minWidth: 0 }}>
          <strong style={{ display: 'block' }}>Ana Camolesi</strong>
          <span style={{ color: 'var(--color-text-soft)', fontSize: '0.92rem' }}>
            Atendimento omnichannel
          </span>
        </div>
        <div
          aria-hidden="true"
          style={{
            width: 48,
            height: 48,
            borderRadius: '16px',
            display: 'grid',
            placeItems: 'center',
            background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',
            color: '#fff',
            fontWeight: 800,
          }}
        >
          AM
        </div>
      </div>
    </header>
  );
}