/**
 * TextSection - Server Component
 *
 * Large text block with centered gradient title and paragraph below.
 * Used for detailed explanations and H2 content sections.
 * Supports basic markdown: **bold** and [links](url)
 *
 * @example
 * ```tsx
 * <TextSection
 *   title="Zoom sur l'electricite boulangerie"
 *   content="Le profil **Boulanger** est specifique..."
 * />
 * ```
 */

import Link from "next/link";

export interface TextSectionProps {
  /** Section title (H2) */
  title: string;
  /** Main content paragraph(s) - can include line breaks and basic markdown */
  content: string;
  /** Optional bullet points */
  bullets?: string[];
}

/**
 * Parse basic markdown (bold and links) to React elements
 */
function parseMarkdown(text: string): React.ReactNode[] {
  const parts: React.ReactNode[] = [];
  // Regex to match **bold** and [text](url)
  const regex = /(\*\*(.+?)\*\*|\[(.+?)\]\((.+?)\))/g;
  let lastIndex = 0;
  let match;
  let key = 0;

  while ((match = regex.exec(text)) !== null) {
    // Add text before the match
    if (match.index > lastIndex) {
      parts.push(text.slice(lastIndex, match.index));
    }

    if (match[2]) {
      // Bold text: **text**
      parts.push(
        <strong key={key++} className="font-semibold text-gray-900">
          {match[2]}
        </strong>
      );
    } else if (match[3] && match[4]) {
      // Link: [text](url)
      const isExternal = match[4].startsWith("http");
      parts.push(
        <Link
          key={key++}
          href={match[4]}
          className="text-orange-700 underline hover:text-orange-700"
          {...(isExternal && { target: "_blank", rel: "noopener noreferrer" })}
        >
          {match[3]}
        </Link>
      );
    }

    lastIndex = match.index + match[0].length;
  }

  // Add remaining text
  if (lastIndex < text.length) {
    parts.push(text.slice(lastIndex));
  }

  return parts;
}

export function TextSection({
  title,
  content,
  bullets,
}: TextSectionProps) {
  return (
    <section className="bg-white py-16 md:py-24">
      <div className="mx-auto max-w-4xl px-4 md:px-8">
        {/* Title */}
        <h2 className="text-center text-2xl font-bold tracking-tight text-gray-900 md:text-3xl lg:text-4xl">
          {title}
        </h2>

        {/* Content */}
        <div className="mt-6 space-y-4 text-center text-base text-gray-600 md:mt-8 md:text-lg">
          {content.split("\n\n").map((paragraph, index) => (
            <p key={index}>{parseMarkdown(paragraph)}</p>
          ))}
        </div>

        {/* Optional bullets */}
        {bullets && bullets.length > 0 && (
          <ul className="mt-6 space-y-3 md:mt-8">
            {bullets.map((bullet, index) => (
              <li
                key={index}
                className="flex items-start gap-3 text-base text-gray-600 md:text-lg"
              >
                <span className="mt-2 size-1.5 shrink-0 rounded-full bg-orange-500" />
                <span>{parseMarkdown(bullet)}</span>
              </li>
            ))}
          </ul>
        )}
      </div>
    </section>
  );
}