"use client";

import { useI18n } from "@/translations/provider";
import { SliderHeader } from "./slider-header";
import type { SliderSlideProps } from "./slider-slide";

const NOTICE_ITEMS = [
  "Your information is kept strictly confidential.",
  "Your details are only used for the matching process.",
  "Nothing is shared without your consent.",
  "You are always in control of what happens next.",
  "Contact details are shared only after your approval.",
  "We provide a safe and respectful environment at every step.",
];

const MAIN_NOTICE =
  "Your privacy and safety are our top priorities. We are committed to keeping your information secure and giving you full control throughout the process.";

export function SliderSlideFive({ index, totalSteps }: SliderSlideProps) {
  const { dictionary: t } = useI18n();
  const tRecord = t as Record<string, string>;

  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={tRecord["Final Notice"] || "Final Notice"}
        />

        <div className="mt-6 space-y-5">
          <p className="text-[#36363C] text-sm font-semibold leading-5">
            {tRecord[MAIN_NOTICE] || MAIN_NOTICE}
          </p>

          <ul className="list-disc space-y-2 ps-5 text-[#36363C] text-sm font-semibold leading-5">
            {NOTICE_ITEMS.map((item) => (
              <li key={item}>{tRecord[item] || item}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}