// components/GuidelinesModal.tsx
import { ModalWrapper } from "./ModalWrapper";
import { getTranslation } from "@/src/hooks/useTranslation";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { CrossIcon, X } from "lucide-react";

export function GuidelinesModal({
  isOpen,
  guidelineToggle,
  setGuidelineToggle,
  guidelineData,
  onContinue,
  showContinue = false,
}: any) {
  if (!isOpen) return null;
  const { language } = useLanguage();
  const text = getTranslation(language).guidelinesModal;

  return (
    <ModalWrapper>
      <div className="bg-white rounded-3xl shadow-xl p-6 flex flex-col w-[90%] max-h-[90%] overflow-y-auto max-w-lg">
        <section className="flex-1 overflow-y-auto">
          <div className="mb-5">
            <p className="text-[#FF8A00] font-semibold text-lg">
              {text.course}
            </p>

            <div
              className="flex items-center justify-between"
              // onClick={() => setGuidelineToggle(!guidelineToggle)}
            >
              <h1 className="text-3xl font-bold">{text.guidelines}</h1>

              {/* <svg
                className={`h-7 w-7 transition-transform ${
                  guidelineToggle ? "rotate-180" : ""
                }`}
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={1.5}
                  d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                />
              </svg> */}
              {!showContinue && (
                <X
                  className="h-7 w-7 cursor-pointer"
                  onClick={() => onContinue()}
                />
              )}
            </div>
          </div>

          <div className="border-t mb-5" />

          <div
            className={`transition-all duration-500 overflow-hidden ${
              guidelineToggle ? "max-h-[600px]" : "max-h-0"
            }`}
          >
            <ol className="space-y-4 text-[15px]">
              {guidelineData?.map((item: any, i: number) => (
                <li key={item.id} className="flex gap-2">
                  <span className="font-semibold text-[#FF8A00]">{i + 1}.</span>
                  <span>{item.description}</span>
                </li>
              ))}
            </ol>
          </div>
        </section>

        {showContinue && (
          <div className="mt-auto pt-5 flex justify-center">
            <button
              onClick={onContinue}
              className="bg-[#FFA733] hover:bg-[#e0911d] transition-colors text-white px-8 py-3 rounded-full font-semibold"
            >
              {text.continue}
            </button>
          </div>
        )}
      </div>
    </ModalWrapper>
  );
}