import React, { useState } from 'react';
import "./styles/BaseTab.css"

const BaseTab = () => {
  const [view, setView] = useState('overview');

  return (
    <div className="tab-content active">
      <div className="base-navigation">
        <button className={`base-nav-btn ${view === 'overview' ? 'active' : ''}`} onClick={() => setView('overview')}>Base Overview</button>
        <button className={`base-nav-btn ${view === 'visualization' ? 'active' : ''}`} onClick={() => setView('visualization')}>Visualization</button>
        <button className={`base-nav-btn ${view === 'ships' ? 'active' : ''}`} onClick={() => setView('ships')}>Ship Gallery</button>
        <button className={`base-nav-btn ${view === 'starbases' ? 'active' : ''}`} onClick={() => setView('starbases')}>Starbases</button>
      </div>

      {view === 'overview' && (
        <div className="base-container">
          <div className="base-view">
            <h3>Base Information</h3>
            <div className="base-stats">
              <div className="stat-item"><span>Power Usage:</span> <span className="stat-value">0/100</span></div>
              <div className="stat-item"><span>Storage:</span> <span className="stat-value">1000</span></div>
            </div>
          </div>
        </div>
      )}

      {view === 'ships' && (
        <div className="ship-gallery-container">
          <div className="current-ship-display">
            <h4>Current Ship: Starter Cruiser</h4>
            <img src="assets/textures/ships/starter_cruiser.png" alt="Ship" style={{ maxWidth: '200px' }} />
          </div>
        </div>
      )}
    </div>
  );
};

export default BaseTab;
