import React from 'react';
import {  FileVideo2, FileTextIcon, Zap } from 'lucide-react';

interface SubChapterProps {
  // type: 'video' | 'document';
  // subChapterName: string;
  // current: boolean;
  // onClick: (type: 'video' | 'document', subChapterName: string) => void;
  // data={subChapter}
  //           onClick={() =>
  //             onSubChapterClick({
  //               chapterIndex: chapterIndex,
  //               subChapterIndex: index,
  //             })
  //           }
  //           current={
  //             current.chapterIndex === chapterIndex &&
  //             current.subChapterIndex === index
  //           }
  data: ChapterDataI;
  onClick: () => void;
  current: boolean;
}

const StateIcon: React.FC<{ current: boolean }> = ({ current }) => {
  const renderIcon = () => {
    if (current) return <Zap className="text-yellow-500 size-4" />;
    // switch (current) {
    //   case 'completed':
    //     return <CheckIcon className="text-green-500 size-4" />;
    //   case 'locked':
    //     return <LockIcon className="text-slate-700 size-4" />;
    //   case 'current':
    //     return <Zap className="text-yellow-500 size-4" />;
    //   default:
    //     return null; // No icon for 'upcoming'
    // }
  };

  return renderIcon();
};

const SubChapter: React.FC<SubChapterProps> = ({ data, current, onClick }) => {
  const type = 'videoLength' in data ? 'video' : 'document';
  const renderTypeIcon = () => {
    switch (type) {
      case 'video':
        return (
          <FileVideo2
            className={`${
              current ? 'text-amber-500' : 'group-hover:text-amber-500'
            }`}
          />
        );
      case 'document':
        return (
          <FileTextIcon
            className={`${
              current ? 'text-amber-500' : 'group-hover:text-amber-500'
            }`}
          />
        );
      default:
        return null;
    }
  };

  return (
    <div
      className={`flex flex-row justify-between py-3 pl-12 pr-6 items-center w-full border-b group cursor-pointer ${
        current ? 'bg-slate-100' : 'bg-white'
      }`}
      onClick={onClick}
    >
      <div className="flex flex-row gap-3 items-center justify-center">
        <div>{renderTypeIcon()}</div>
        <div
          className={`font-semibold ${
            current ? 'text-amber-500' : 'group-hover:text-amber-500'
          }`}
        >
          {data.title}
        </div>
      </div>
      <StateIcon current={current} />
    </div>
  );
};

export default SubChapter;