import type { Lesson } from "@/types/course";

type LessonRowProps = {
  index: number;
  lesson: Lesson;
  isActive: boolean;
  isLocked: boolean;
  onSelect: () => void;
};

const typeColors: Record<Lesson["type"], string> = {
  video: "bg-[#ffecee] text-[#ca4d6f]",
  reading: "bg-[#ecfbf4] text-[#2f9d73]",
  interactive: "bg-[#eef4ff] text-[#6288da]",
};

export default function LessonRow({ index, lesson, isActive, isLocked, onSelect }: LessonRowProps) {
  return (
    <button
      className={`w-full rounded-2xl border p-5 text-left transition ${
        isActive ? "border-brand/60 bg-white shadow-sm" : "border-slate-200 bg-white hover:border-slate-300"
      } ${isLocked ? "cursor-not-allowed opacity-60" : ""}`}
      onClick={isLocked ? undefined : onSelect}
      type="button"
    >
      <div className="flex items-center gap-4">
        <div
          className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-lg font-semibold ${
            isActive ? "border-brand text-brand" : "border-slate-300 text-slate-500"
          }`}
        >
          {isLocked ? "L" : index + 1}
        </div>

        <div className="min-w-0 flex-1">
          <div className="mb-1 flex flex-wrap items-center gap-2 text-sm text-slate-500">
            <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize ${typeColors[lesson.type]}`}>
              {lesson.type}
            </span>
            <span>{lesson.minutes} min</span>
            {isLocked ? <span className="text-slate-400">Locked</span> : null}
            {lesson.isPreview ? <span className="text-[#8a6b00]">Preview</span> : null}
          </div>
          <p className="truncate text-lg text-[#222a38] md:text-2xl">{lesson.title}</p>
        </div>

        {isActive ? (
          <div className="hidden h-20 w-36 overflow-hidden rounded-xl border border-slate-200 bg-[#202020] md:block">
            <div className="flex h-full items-center justify-center text-2xl text-white/80">Play</div>
          </div>
        ) : null}
      </div>
    </button>
  );
}