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

const QuestsTab = () => {
  const [type, setType] = useState('main');

  return (
    <div className="tab-content active">
      <div className="quests-container">
        <div className="quest-tabs">
          {['main', 'daily', 'weekly', 'completed'].map(t => (
            <button
              key={t}
              className={`quest-tab-btn ${type === t ? 'active' : ''}`}
              onClick={() => setType(t)}
            >
              {t === 'main' ? 'Main Story' : t.charAt(0).toUpperCase() + t.slice(1)}
            </button>
          ))}
        </div>

        <div className="daily-countdown">Daily quests reset in: 00:00:00</div>

        <div className="quest-list">
          <div className="empty-quests">
            <p>No {type} quests available at the moment.</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default QuestsTab;
