"use client";

import type {
  RegistrationAnswer,
  SliderSlideProps,
} from "@/components/sliders/slider-slide";

type SliderSlideFourProps = SliderSlideProps & {
  selectedRegistration: RegistrationAnswer;
  onRegistrationChange: (registration: RegistrationAnswer) => void;
};

export function SliderSlideFour({
  index,
  selectedRegistration,
  onRegistrationChange,
}: SliderSlideFourProps) {
  const options = [
    { id: "self", label: "Registering for myself" },
    { id: "other", label: "Registering for someone else" },
  ] as const;

  return (
    <section
      aria-label={`Slide ${index + 1}`}
      className="flex h-full min-h-0 w-full shrink-0 flex-col"
    >
      <div className="min-h-0 flex-1 overflow-y-auto pb-28">
        <div className="text-center">
          <p className="text-[#747474] text-xs font-semibold">Submit Process</p>
          <p className="text-[#111111] font-bold">
            {index + 1}/4 terms & conditions
          </p>
        </div>
        <div className="bg-[#F14B46]/10 py-2.5 px-3.5 border border-[#F14B46] rounded-xl mt-8">
          <p className="text-[#F14B46] text-xs font-semibold text-center">
            Read the terms and conditions carefully so that you don't run into
            any problems in the next process - reading this section is
            mandatory.
          </p>
        </div>
        <div className="flex min-h-[calc(100dvh-520px)] items-center justify-center pt-6">
          <div className="w-full max-w-[440px] space-y-4">
            {options.map((option) => {
              const isSelected = option.id === selectedRegistration;

              return (
                <button
                  key={option.id}
                  type="button"
                  aria-pressed={isSelected}
                  className={[
                    "flex w-full items-center gap-3 rounded-[18px] px-4 py-5 text-left transition-colors",
                    isSelected
                      ? "bg-[#F4435C] text-white"
                      : "bg-[#ECE9E9] text-[#2A2A2A]",
                  ].join(" ")}
                  onClick={() => onRegistrationChange(option.id)}
                >
                  <span
                    className={[
                      "flex h-6 w-6 shrink-0 items-center justify-center rounded-full border transition-colors",
                      isSelected
                        ? "border-white bg-white text-[#F4435C]"
                        : "border-[#9B9B9B] bg-transparent text-transparent",
                    ].join(" ")}
                    aria-hidden="true"
                  >
                    <svg
                      viewBox="0 0 16 16"
                      className="h-3.5 w-3.5"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      aria-hidden="true"
                    >
                      <path
                        d="M3.5 8.5 6.5 11.5 12.5 5.5"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </span>
                  <span className="text-[15px] font-semibold sm:text-[16px]">
                    {option.label}
                  </span>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}