import React from 'react';
import SubChapter from './subChapter';
import {
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} 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 ChapterProps {
  chapterIndex: number;
  chapterTitle: string;
  subChapters: ChapterDataI[];
  onSubChapterClick: ({
    chapterIndex,
    subChapterIndex,
  }: {
    chapterIndex: number;
    subChapterIndex: number;
  }) => void;
  current: {
    chapterIndex: number;
    subChapterIndex: number;
  };
}

const Chapter: React.FC<ChapterProps> = ({
  chapterIndex,
  chapterTitle,
  subChapters,
  onSubChapterClick,
  current,
}) => {
  return (
    <AccordionItem value={chapterTitle} >
      <AccordionTrigger className="w-full">
        <div className="flex justify-between items-center w-full p-4">
          <div className="text-lg font-semibold text-amber-800">
            {chapterTitle}
          </div>
        </div>
      </AccordionTrigger>
      <AccordionContent>
        {subChapters.map((subChapter) => (
          <SubChapter
            key={subChapter.position}
            data={subChapter}
            onClick={() =>
              onSubChapterClick({
                chapterIndex: chapterIndex,
                subChapterIndex: subChapter.position,
              })
            }
            current={
              current.chapterIndex === chapterIndex &&
              current.subChapterIndex === subChapter.position
            }
          />
        ))}
      </AccordionContent>
    </AccordionItem>
  );
};

export default Chapter;