import React, { useEffect, useState } from "react";
import DashboardNavBar from "./DashboardNavBar";
import { projectTutorialApi } from "../../services/dashboard/projectTutorialApi";
import { AIIcon } from "../icons/ExportCommonIcons";
import { TutorialCard } from "./TutorialCard";

const DashboardTutorial: React.FC = () => {
    const [tutorials, setTutorials] = useState<Tutorial[]>([]);

    useEffect(() => {
        const fetchTutorials = async () => {
            try {
                const res = await projectTutorialApi();
                if (res && Array.isArray(res)) {
                    setTutorials(res);
                }
            } catch (error) {
                console.error("Error fetching tutorials:", error);
            }
        };

        fetchTutorials();
    }, []);

    return (
        <div className="dashboard-home-container">
            <DashboardNavBar page="tutorial" />
            <div className="dashboard-container" style={{ height: "calc(100% - 87px)" }}>
                <div className="tutorials-main-header">
                    <div className="tutorial-buttons-container">
                        <button className="add-tutorials-button">New Tutorial</button>
                        <button className="add-tutorials-button">
                            <AIIcon /> New Tutorial (beta)
                        </button>
                    </div>
                </div>
                <div className="tutorials-list">
                    {tutorials.length > 0 ? (
                        tutorials.map((tut) => <TutorialCard key={tut._id} tutorial={tut} />)
                    ) : (
                        <div className="empty-state">No tutorials available</div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default DashboardTutorial;
