"use client";

import Image from "next/image";
import { SliderHeader } from "./slider-header";
import type { GenderAnswer, SliderSlideProps } from "./slider-slide";

type GenderOption = {
  id: GenderAnswer;
  label: string;
  alt: string;
  enabledSrc: string;
  disabledSrc: string;
};

const GENDER_OPTIONS: GenderOption[] = [
  {
    id: "man",
    label: "Man",
    alt: "man",
    enabledSrc: "/assets/images/Group 27033.svg",
    disabledSrc: "/assets/images/disabled Group 27033.svg",
  },
  {
    id: "woman",
    label: "Woman",
    alt: "woman",
    enabledSrc: "/assets/images/enabled Group 27032.svg",
    disabledSrc: "/assets/images/Group 27032.svg",
  },
];

type SliderSlideThreeProps = SliderSlideProps & {
  selectedGender: GenderAnswer;
  onGenderChange: (gender: GenderAnswer) => void;
};

export function SliderSlideThree({
  index,
  totalSteps,
  selectedGender,
  onGenderChange,
}: SliderSlideThreeProps) {
  return (
    <section
      aria-label={`Slide ${index + 1}`}
      className="flex h-full min-h-0 w-full shrink-0 flex-col justify-between"
    >
      <SliderHeader index={index} totalSteps={totalSteps} title="Select your gender" />

      <div className="flex w-full items-center justify-evenly">
        {GENDER_OPTIONS.map((option) => {
          const isSelected = option.id === selectedGender;

          return (
            <button
              key={option.id}
              type="button"
              aria-pressed={isSelected}
              className="group flex flex-col items-center outline-none"
              onClick={() => onGenderChange(option.id)}
            >
              <span className="relative block h-[83px] w-[83px]">
                <Image
                  src={option.disabledSrc}
                  alt=""
                  aria-hidden="true"
                  width={83}
                  height={83}
                  className={[
                    "absolute inset-0 h-full w-full transition-[opacity,transform] duration-300 ease-out",
                    isSelected ? "scale-95 opacity-0" : "scale-100 opacity-100",
                  ].join(" ")}
                />
                <Image
                  src={option.enabledSrc}
                  alt={option.alt}
                  width={83}
                  height={83}
                  className={[
                    "absolute inset-0 h-full w-full transition-[opacity,transform] duration-300 ease-out",
                    isSelected ? "scale-100 opacity-100" : "scale-95 opacity-0",
                  ].join(" ")}
                />
              </span>
              <p
                className={[
                  "mt-2 text-center group-14 font-semibold transition-colors duration-300 ease-out",
                  isSelected ? "text-[#FF6175]" : "text-[#111111]",
                ].join(" ")}
              >
                {option.label}
              </p>
            </button>
          );
        })}
      </div>
      <div className="h-28" />
    </section>
  );
}