"use client";
import { useState } from 'react';
import CreateTicketForm from './CreateTicketForm';
import KnowledgeBase from './KnowledgeBase';
import TicketStatusCheck from './TicketStatusCheck';

type TabType = 'create' | 'knowledge' | 'status';

const SupportCenterContent = () => {
  const [activeTab, setActiveTab] = useState<TabType>('create');

  return (
    <section className="support-center-content section-padding">
      <div className="container">
        <div className="row">
          <div className="col-12">
            {/* Tab Navigation */}
            <div className="support-tabs">
              <ul className="support-tabs__nav">
                <li className={activeTab === 'create' ? 'active' : ''}>
                  <button onClick={() => setActiveTab('create')}>
                    <i className="fa-solid fa-ticket me-2"></i>
                    Submit a Ticket
                  </button>
                </li>
                <li className={activeTab === 'knowledge' ? 'active' : ''}>
                  <button onClick={() => setActiveTab('knowledge')}>
                    <i className="fa-solid fa-book me-2"></i>
                    Knowledge Base
                  </button>
                </li>
                <li className={activeTab === 'status' ? 'active' : ''}>
                  <button onClick={() => setActiveTab('status')}>
                    <i className="fa-solid fa-search me-2"></i>
                    Check Ticket Status
                  </button>
                </li>
              </ul>

              {/* Tab Content */}
              <div className="support-tabs__content">
                {activeTab === 'create' && <CreateTicketForm />}
                {activeTab === 'knowledge' && <KnowledgeBase />}
                {activeTab === 'status' && <TicketStatusCheck />}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default SupportCenterContent;