"use client";

import NoticeBox from "./notice-box";
import { SliderHeader } from "./slider-header";
import type { RegistrationAnswer, SliderSlideProps } from "./slider-slide";

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

export function SliderSlideFour({
  index,
  totalSteps,
  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">
        <SliderHeader index={index} totalSteps={totalSteps} title="Registration Type" />
        <NoticeBox className="mt-8" align="justify">
          You can register both for yourself and for your loved ones, but
          obtaining the explicit consent and permission of the person you are
          creating the profile for is mandatory. To ensure accuracy, it is best
          to let the individual complete the subsequent steps themselves.
          Remember that all matches are introduced with absolute privacy and
          strictly based on the information you provide.
        </NoticeBox>
        <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="group-14 font-semibold">{option.label}</span>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}