import React from 'react';

export default function GameProviderTabs({
  providers = [],
  selected,
  onChange,
}) {
  if (!providers?.length) return null;

  const getLogo = (provider) => {
    const logos = {
      JILI: '/images/providers/jili.png',
      PG: '/images/providers/pg.png',
      SPRIBE: '/images/providers/spribe.png',
      'PRAGMATIC PLAY': '/images/providers/pragmatic.png',
    };

    return logos[provider] || null;
  };

  return (
    <>
      <style>
        {`
          .game-provider-tabs-wrap {
            position: sticky;
            top: 68px;
            z-index: 30;
            padding: 10px 10px 12px 10px !important;
            background: rgba(5, 74, 79, 0.96) !important;
            border-bottom: 1px solid rgba(255,255,255,0.04) !important;
            backdrop-filter: blur(10px) !important;
          }

          .game-provider-tabs-scroll {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            white-space: nowrap !important;
            scroll-behavior: smooth !important;
            -ms-overflow-style: none !important;
            scrollbar-width: none !important;
            padding-bottom: 2px !important;
          }

          .game-provider-tabs-scroll::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
          }

          .game-provider-tab {
            flex: 0 0 auto !important;
            height: 38px !important;
            min-width: 72px !important;
            padding: 0 16px !important;
            border-radius: 14px !important;
            border: 1px solid rgba(20, 148, 153, 0.9) !important;
            background: linear-gradient(180deg, #0d6d73 0%, #08525a 100%) !important;
            color: #eaffff !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            white-space: nowrap !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
            transition: all 0.2s ease !important;
            outline: none !important;
          }

          .game-provider-tab.active {
            border: 1px solid #ffd34d !important;
            background: linear-gradient(180deg, #ffd84e 0%, #ffc800 100%) !important;
            color: #101010 !important;
            box-shadow: 0 4px 12px rgba(255, 210, 70, 0.28) !important;
          }

          .game-provider-tab:focus,
          .game-provider-tab:focus-visible,
          .game-provider-tab:active,
          .game-provider-tab:hover {
            outline: none !important;
          }

          .game-provider-tab:not(.active):hover {
            border-color: rgba(28, 180, 186, 1) !important;
            background: linear-gradient(180deg, #117980 0%, #096069 100%) !important;
          }

          .game-provider-logo {
            display: block !important;
            max-height: 20px !important;
            width: auto !important;
            max-width: 92px !important;
            object-fit: contain !important;
            pointer-events: none !important;
          }

          .game-provider-tab.active .game-provider-logo {
            filter: none !important;
          }

          .game-provider-text {
            display: inline-block !important;
            transform: translateY(0.5px);
          }
        `}
      </style>

      <div className="game-provider-tabs-wrap">
        <div className="game-provider-tabs-scroll">
          {providers.map((provider) => {
            const active = provider === selected;
            const logo = getLogo(provider);

            return (
              <button
                key={provider}
                type="button"
                onClick={() => onChange(provider)}
                className={`game-provider-tab ${active ? 'active' : ''}`}
              >
                {logo ? (
                  <img
                    src={logo}
                    alt={provider}
                    className="game-provider-logo"
                    draggable="false"
                  />
                ) : (
                  <span className="game-provider-text">{provider}</span>
                )}
              </button>
            );
          })}
        </div>
      </div>
    </>
  );
}