import React from 'react';
import { Search } from 'lucide-react';

export default function GameSearchBar({ keyword, setKeyword }) {
  return (
    <>
      <style>
        {`
          .game-search-wrap {
            position: sticky;
            top: 126px;
            z-index: 20;
            padding: 8px 8px 10px 8px !important;
            background: #00565c !important;
          }

          .game-search-shell {
            display: flex !important;
            align-items: center !important;
            width: 100% !important;
            height: 52px !important;
            border-radius: 16px !important;
            border: 1px solid #00b7b3 !important;
            background: #003b46 !important;
            box-shadow: none !important;
            overflow: hidden !important;
            padding: 0 14px 0 18px !important;
          }

          .game-search-input {
            flex: 1 !important;
            width: 100% !important;
            height: 100% !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            background: transparent !important;
            color: #00ffd9 !important;
            font-size: 16px !important;
            font-weight: 700 !important;
            padding: 0 !important;
            margin: 0 !important;
            line-height: 1 !important;
            -webkit-appearance: none !important;
            appearance: none !important;
            caret-color: #00ffd9 !important;
          }

          .game-search-input::placeholder {
            color: #00ffd9 !important;
            opacity: 1 !important;
          }

          .game-search-input:focus,
          .game-search-input:focus-visible,
          .game-search-input:active {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            background: transparent !important;
          }

          .game-search-shell:focus-within {
            border: 1px solid #00b7b3 !important;
            outline: none !important;
            box-shadow: none !important;
            background: #003b46 !important;
          }

          .game-search-btn {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            margin-left: 10px !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            background: transparent !important;
            color: #00ffd9 !important;
            border-radius: 999px !important;
            padding: 0 !important;
            cursor: pointer !important;
            -webkit-tap-highlight-color: transparent !important;
          }

          .game-search-btn:hover,
          .game-search-btn:focus,
          .game-search-btn:focus-visible,
          .game-search-btn:active {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            background: transparent !important;
            color: #00ffd9 !important;
          }

          .game-search-btn svg {
            width: 24px !important;
            height: 24px !important;
            stroke-width: 2.6 !important;
          }
        `}
      </style>

      <div className="game-search-wrap">
        <div className="game-search-shell">
          <input
            type="text"
            value={keyword}
            onChange={(e) => setKeyword(e.target.value)}
            placeholder="Game name"
            className="game-search-input"
            autoComplete="off"
            spellCheck={false}
          />

          <button type="button" className="game-search-btn">
            <Search />
          </button>
        </div>
      </div>
    </>
  );
}