'use client';

import { useRouter, useSearchParams } from 'next/navigation';
import { SECTION_ORDER } from '../sectionConfig';
import type { ImageLandingPayload } from '../payloads';

interface ImageLandingCardProps {
  payload: ImageLandingPayload;
  slug: string;
}

export default function ImageLandingCard({ payload, slug }: ImageLandingCardProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const qs = searchParams.toString();
  const suffix = qs ? `?${qs}` : '';

  const handleContinue = () => {
    const idx = SECTION_ORDER.indexOf(slug);
    const next = SECTION_ORDER[idx + 1];
    if (next) router.push(`/onboarding/${next}${suffix}`);
  };

  return (
    <main className="image-landing-page">
      <div className="image-landing-content">
        <div className="image-landing-circle">
          <img src={payload.image} alt="" />
        </div>

        {payload.titleGold && (
          <h1 className="image-landing-title">
            <span className="gold">{payload.titleGold}</span>
            {payload.title ? <><br />{payload.title}</> : null}
          </h1>
        )}

        {!payload.titleGold && payload.title && (
          <h1 className="image-landing-title">{payload.title}</h1>
        )}

        {payload.description && (
          <p className="image-landing-description">{payload.description}</p>
        )}
      </div>

      <div className="image-landing-footer">
        <button type="button" className="cta-gold" onClick={handleContinue}>
          {payload.cta}
        </button>
      </div>
    </main>
  );
}
