import React, { useEffect, useState } from 'react';
import DashboardNavBar from './DashboardNavBar';
import DashboardCard from './DashboardCard';
import { projectTutorial } from '../../services/dashboard/projectTutorial';
interface Project {
    _id: string;
    projectName: string;
    thumbnail: string;
    createdBy: string;
    projectUuid?: string;
}

interface DiscardedProjects {
    [key: string]: Project[];
}

const DashboardTutorial = () => {
    const [tutorialProject, setTutorialProject] = useState<DiscardedProjects>({})
    const handleIcon = async () => {
        try {
            let tutorial = await projectTutorial()
            setTutorialProject(tutorial)
        } catch {

        }
    }


    const [openKebabProjectId, setOpenKebabProjectId] = useState<string | null>(
      null
    );

    useEffect(() => {
        handleIcon()
    }, [])
    const renderTrashProjects = () => {
        const projectList = tutorialProject[Object.keys(tutorialProject)[0]];

        if (!projectList?.length) {
            return <div className="empty-state">No deleted projects found</div>;
        }

        return projectList.map((tutorials: any) => (
            <DashboardCard
                key={tutorials._id}
                projectName={tutorials.projectName}
                thumbnail={tutorials.thumbnail}
                projectId={tutorials._id}
                openKebabProjectId={openKebabProjectId}
                setOpenKebabProjectId={setOpenKebabProjectId}
            />
        ));
    };
    return (
        <div className="dashboard-home-container">
            <DashboardNavBar
                page="tutorial"
            />

            <div className="dashboard-container" style={{ height: "calc(100% - 87px)" }}>
                <div className="header" style={{ display: 'flex', gap: '7px' }}></div>
                <div className="cards-container">
                    {renderTrashProjects()}
                </div>
            </div>
        </div>
    );
}

export default DashboardTutorial;