import React from "react"
import VideoCardInterface from "Interfaces/VideoCardInterface"
import SearchResult from "./SearchResultComponent"

interface TabsComponentProps {
    activeTab: string;
    videoResult: VideoCardInterface[];
    feedbackController?: (type: string, message: string) => void;
    hasMore: boolean;
    onShowMore: () => void;
    onTabChange?: (tabId: string) => void;
}

const TabsComponent: React.FC<TabsComponentProps> = ({
    activeTab,
    videoResult,
    feedbackController,
    hasMore,
    onShowMore,
    onTabChange
}) => {
    const handleTabClick = (tabId: string) => {
        if (onTabChange) {
            onTabChange(tabId)
        }
    }

    return (
        <div className="tab-container">
            <div className="tab-header">
                <button
                    className={`tab-button ${activeTab === 'video' ? 'active' : ''}`}
                    onClick={() => handleTabClick('video')}
                >
                    Video
                </button>
                <button
                    className={`tab-button ${activeTab === 'playlist' ? 'active' : ''}`}
                    onClick={() => handleTabClick('playlist')}
                >
                    Playlist
                </button>
            </div>
            <div className="tab-content">
                {activeTab === 'video' && (
                    <div className="tab-pane active" id="video">
                        <SearchResult videoResult={videoResult} feedbackController={feedbackController}></SearchResult>
                        {hasMore && (
                            <button type="button" className="btn-imp load-more" onClick={onShowMore}>
                                Show more
                            </button>
                        )}
                    </div>
                )}
                {activeTab === 'playlist' && (
                    <div className="tab-pane active" id="playlist">
                        <SearchResult videoResult={videoResult} feedbackController={feedbackController}></SearchResult>
                        {hasMore && (
                            <button type="button" className="btn-imp load-more" onClick={onShowMore}>
                                Show more
                            </button>
                        )}
                    </div>
                )}
            </div>
        </div>
    );
};

export default TabsComponent