"use client";

import type { ReactNode } from "react";
import { IoTimeOutline } from "react-icons/io5";
import Button from "./button";

type TestIntroPageProps = {
  title: string;
  estimateTime: string;
  description: string;
  bulletPoints?: readonly string[];
  disclaimerText: string;
  startLabel: string;
  onStart: () => void;
  children?: ReactNode;
};

export default function TestIntroPage({
  title,
  estimateTime,
  description,
  bulletPoints = [],
  disclaimerText,
  startLabel,
  onStart,
  children,
}: TestIntroPageProps) {
  return (
    <div className="flex flex-1 flex-col min-h-0 overflow-y-auto">
      {/* Hero Image */}
      <div className="mx-auto w-[348px] h-[156px] shrink-0 overflow-hidden rounded-[20px] shadow-[0_8px_28px_rgba(0,0,0,0.08)]">
        <img
          src="/assets/images/test-intro-hero.png"
          alt=""
          aria-hidden="true"
          className="w-full h-full object-cover"
        />
      </div>

      {/* Disclaimer Card */}
      <div className="mt-5 mx-1 rounded-[16px] bg-[#FFF1F4] border border-[#FDDDE3] px-4 py-4">
        <p className="text-justify group-12 leading-[1.55] font-medium text-[#C0475B]">
          {disclaimerText}
        </p>
      </div>

      {/* Test Info Section */}
      <div className="mt-5 px-1">
        <h2 className="group-16 font-bold text-[#1B1B1B] leading-tight">
          {title}
        </h2>

        {/* Estimate Time */}
        <div className="mt-2.5 flex items-center gap-1.5">
          <IoTimeOutline className="text-[16px] text-[#5A5A5A]" />
          <span className="group-12 font-medium text-[#5A5A5A]">
            {description}: {estimateTime}
          </span>
        </div>

        {/* Bullet Points */}
        {children ? (
          <div className="mt-4">{children}</div>
        ) : bulletPoints.length > 0 ? (
          <ul className="mt-4 space-y-3 pl-1">
            {bulletPoints.map((point, index) => (
              <li
                key={index}
                className="flex items-start gap-2 group-12 leading-[1.55] text-[#3A3A3A]"
              >
                <span className="mt-[6px] h-[5px] w-[5px] shrink-0 rounded-full bg-[#3A3A3A]" />
                <span>{point}</span>
              </li>
            ))}
          </ul>
        ) : null}
      </div>

      {/* Spacer */}
      <div className="flex-1 min-h-6" />

      {/* Start Button */}
      <div
        className="sticky bottom-0 bg-[#F7F1F0] px-1 pt-3"
        style={{ paddingBottom: "calc(24px + var(--safe-bottom))" }}
      >
        <Button onClick={onStart}>{startLabel}</Button>
      </div>
    </div>
  );
}