import React from 'react';
import Chapter from './chapter';
import { Accordion } from '@/components/ui/accordion';

// interface SubChapterProps {
//   type: 'video' | 'document';
//   subChapterName: string;
//   current: boolean;
//   onClick: (type: 'video' | 'document', subChapterName: string) => void;
// }

// interface ChapterProps {
//   chapterTitle: string;
//   subChapters: SubChapterProps[];
//   onSubChapterClick: (
//     type: 'video' | 'document',
//     subChapterName: string
//   ) => void;
// }

// interface ChaptersBarProps {
//   chapters: ChapterProps[];
//   showThumbnail?: boolean;
// }
// thumbnail
//         chapters={chapters}
//         handleSubChapterClick={handleSubChapterClick}
//         current={current}
interface ChaptersBarProps {
  thumbnail: string;
  chapters: ChapterI[];
  handleSubChapterClick: ({
    chapterIndex,
    subChapterIndex,
  }: {
    chapterIndex: number;
    subChapterIndex: number;
  }) => void;
  current: {
    chapterIndex: number;
    subChapterIndex: number;
  };
}

const ChaptersBar: React.FC<ChaptersBarProps> = ({
  thumbnail,
  chapters,
  handleSubChapterClick,
  current,
}) => {
  return (
    <div className="flex flex-col">
      <div className="overflow-hidden">
        <img
          src={thumbnail}
          alt="course's thumbnail"
          draggable="false"
          className="w-96 h-auto hover:scale-105 transition duration-500 cursor-pointer"
        />
      </div>

      <Accordion type="multiple" defaultValue={[chapters[0]?.title ?? '']} >
        {chapters.map((chapter) => (
          <Chapter
            key={chapter.position}
            chapterIndex={chapter.position}
            chapterTitle={chapter.title}
            subChapters={chapter.data}
            onSubChapterClick={handleSubChapterClick}
            current={current}
          />
        ))}
      </Accordion>
    </div>
  );
};

export default ChaptersBar;