import React, { useState } from 'react';
import CategorySelector from "../components/CategorySelector"; // Імпортуємо твій новий компонент
import "./styles/ShopTab.css";

const ShopTab = () => {
  const [category, setCategory] = useState('ships');
  const categories = ['Featured', 'ships', 'weapons', 'armors', 'cosmetics', 'materials'];

  return (
    <div className="tab-content active">
      <div className="shop-container">

        <div className="shop-header">
          {/* Використовуємо універсальний компонент замість ручного мапінгу */}
          <CategorySelector
            categories={categories}
            activeCategory={category}
            onCategoryChange={setCategory}
          />

          <div className="shop-resources">
            <div className="card-resource">
              <i className="fas fa-gem"></i>
              <span id="gems">10</span>
            </div>
            <div className="card-resource">
              <i className="fas fa-coins"></i>
              <span id="credits">1,000</span>
            </div>
          </div>
        </div>

        <div className="shop-content">
          <div className="shop-items-container">
            <div className="shop-items">
              <p className="status-text">Browsing {category}...</p>
              {/* Тут буде логіка відображення товарів */}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ShopTab;