import type { ReactNode } from "react";

type Props = {
  /** English label — logo-style lowercase latin */
  en: string;
  /** Primary Persian phrase (solid black) */
  title: string;
  /** Secondary Persian phrase (lighter black), slider-style */
  titleMuted?: string;
  as?: "h1" | "h2";
  /** Invert colors for dark sections */
  light?: boolean;
  /** Optional sibling (lead, link, CTA) */
  aside?: ReactNode;
  className?: string;
};

/**
 * Section heading inspired by the HOM logo + hero slider title:
 * latin rail (line + red dot), then FA title split into black / muted parts.
 */
export function SectionTitle({
  en,
  title,
  titleMuted,
  as = "h2",
  light = false,
  aside,
  className,
}: Props) {
  const Heading = as;

  return (
    <div className={`section-title${light ? " section-title--light" : ""}${className ? ` ${className}` : ""}`}>
      <div className="section-title__main">
        <div className="section-title__rail" aria-hidden="true">
          <span className="section-title__en latin">{en}</span>
          <span className="section-title__track">
            <span className="section-title__line" />
            <span className="section-title__capsule" />
            <span className="section-title__line section-title__line--tail" />
            <span className="section-title__dot" />
          </span>
        </div>
        <Heading className="section-title__fa">
          {title}
          {titleMuted ? (
            <>
              {" "}
              <em>{titleMuted}</em>
            </>
          ) : null}
        </Heading>
      </div>
      {aside ? <div className="section-title__aside">{aside}</div> : null}
    </div>
  );
}