"use client";

import { memo } from "react";
import type { SectionHeaderVariantValue } from "../../../../lib/propNormalization";

interface SectionHeaderProps {
  title: string;
  subtitle: string;
  titleLg?: string;
  variant?: SectionHeaderVariantValue;
  /** When set with `variant="multi-line"`, large screens show three title lines (Figma SectionCardSteps). */
  stackedDesktopLines?: readonly [string, string, string];
  /**
   * With `variant="multi-line"`, keep **Rule stack** desktop type: title **32/40** at `lg`, **40/52** at `xl`;
   * subtitle **18 / 1.3** at `lg`, **24/32** at `xl`, **left-aligned** in its column from `lg` (Figma **22085:860413**).
   */
  ruleStackDesktopTypeScale?: boolean;
  /**
   * When true with `ruleStackDesktopTypeScale`, title and subtitle split into two columns from project **`md`** (640px),
   * e.g. `/use-cases` Rule stack. Default keeps the split at **`lg`** (1024px).
   */
  twoColumnsFromMd?: boolean;
}

/**
 * Figma: **Type / SectionHeader** ([17411:10981](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17411-10981)).
 * Responsive title + subtitle lockup: stacked on small viewports, split row from `lg` up.
 */
const SectionHeader = memo<SectionHeaderProps>(
  ({
    title,
    subtitle,
    titleLg,
    variant: variantProp = "default",
    stackedDesktopLines,
    ruleStackDesktopTypeScale = false,
    twoColumnsFromMd = false,
  }) => {
    const variant = variantProp;
    const useStackedDesktop =
      variant === "multi-line" && stackedDesktopLines != null;
    const splitFromMd =
      twoColumnsFromMd &&
      ruleStackDesktopTypeScale &&
      variant === "multi-line";
    const rowAlignClasses = splitFromMd
      ? "md:flex-row md:justify-between md:items-center xl:gap-[var(--spacing-scale-024)]"
      : variant === "multi-line"
        ? "lg:flex-row lg:justify-between lg:items-center xl:gap-[var(--spacing-scale-024)]"
        : "lg:flex-row lg:justify-between lg:items-start xl:gap-[var(--spacing-scale-024)]";

    return (
      <div
        className={`flex flex-col gap-[var(--spacing-scale-004)] w-full ${rowAlignClasses}`}
      >
        {/* Title — left column at md+ (use cases) or lg+ */}
        <div
          className={
            variant === "multi-line"
              ? splitFromMd
                ? "md:w-[50%] md:h-[var(--spacing-scale-120)] md:flex md:items-center xl:w-[50%] xl:h-[156px] xl:flex xl:items-center"
                : "lg:w-[50%] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center xl:w-[50%] xl:h-[156px] xl:flex xl:items-center"
              : "lg:w-[369px] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center xl:w-[452px] xl:h-[156px] xl:flex xl:items-center"
          }
        >
          <h2
            className={
              variant === "multi-line"
                ? ruleStackDesktopTypeScale
                  ? splitFromMd
                    ? "font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:w-full md:max-w-[571px] md:text-left md:text-large-heading xl:text-xx-large-heading"
                    : "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-full lg:max-w-[571px] lg:text-left lg:text-large-heading xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
                  : "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-[410px] lg:text-left xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
                : "font-bricolage-grotesque text-medium-heading sm:text-large-heading lg:text-large-heading lg:w-[369px] lg:pr-[var(--spacing-scale-096)] xl:text-xx-large-heading xl:w-[452px] xl:pr-[var(--spacing-scale-096)] text-[var(--color-content-default-primary)]"
            }
          >
            <span className={splitFromMd ? "block md:hidden" : "block lg:hidden"}>
              {title}
            </span>
            {useStackedDesktop ? (
              <span className={splitFromMd ? "hidden md:block" : "hidden lg:block"}>
                <span className="block">{stackedDesktopLines[0]}</span>
                <span className="block">{stackedDesktopLines[1]}</span>
                <span className="block">{stackedDesktopLines[2]}</span>
              </span>
            ) : (
              <span className={splitFromMd ? "hidden md:block" : "hidden lg:block"}>
                {titleLg || title}
              </span>
            )}
          </h2>
        </div>

        {/* Subtitle — right column at md+ (use cases) or lg+ */}
        <div
          className={
            variant === "multi-line"
              ? ruleStackDesktopTypeScale
                ? splitFromMd
                  ? "md:w-[50%] md:h-[var(--spacing-scale-120)] md:flex md:items-center md:justify-start md:ml-[var(--spacing-scale-016)] xl:ml-0 xl:w-[50%] xl:h-[156px] xl:flex xl:items-center xl:justify-start"
                  : "lg:w-[50%] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center lg:justify-start lg:ml-[var(--spacing-scale-016)] xl:ml-0 xl:w-[50%] xl:h-[156px] xl:flex xl:items-center xl:justify-start"
                : "lg:w-[50%] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center lg:justify-end lg:ml-[var(--spacing-scale-016)] xl:ml-0 xl:w-[50%] xl:h-[156px] xl:flex xl:items-center xl:justify-end"
              : "lg:w-[928px] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center lg:justify-end xl:h-[156px] xl:flex xl:items-center xl:justify-end"
          }
        >
          <p
            className={
              variant === "multi-line"
                ? ruleStackDesktopTypeScale
                  ? splitFromMd
                    ? "text-small-paragraph text-[var(--color-content-default-tertiary)] md:text-left md:text-large-paragraph xl:text-x-large-paragraph"
                    : "text-small-paragraph md:text-large-paragraph lg:text-left lg:text-large-paragraph text-[var(--color-content-default-tertiary)] xl:text-x-large-paragraph"
                  : "text-small-paragraph md:text-large-paragraph xl:text-x-large-paragraph text-[var(--color-content-default-tertiary)] lg:text-right"
                : "text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph xl:text-right text-[var(--color-gray-600)] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)]"
            }
          >
            {subtitle}
          </p>
        </div>
      </div>
    );
  },
);

SectionHeader.displayName = "SectionHeader";

export default SectionHeader;
