"use client";

import { type CSSProperties, type ReactNode, useRef } from "react";
import { useInView } from "@/app/hooks/useInView";
import { DrawLine } from "./animations/DrawLine";
import { TextDiffuseReveal } from "./animations/TextDiffuseReveal";
import { Reveal } from "./Reveal";

interface SectionProps {
  id?: string;
  eyebrow?: string;
  title: string;
  description?: string;
  dark?: boolean;
  aside?: ReactNode;
  children: ReactNode;
  disableChildrenAnimation?: boolean;
}

/** Atraso (s) de cada item do cabeçalho: entram em escada, como a linha que se desenha logo depois. */
const stagger = (seconds: number) =>
  ({ "--reveal-delay": `${seconds}s` }) as CSSProperties;

export const Section = ({
  id,
  eyebrow,
  title,
  description,
  dark,
  aside,
  children,
  disableChildrenAnimation = false,
}: SectionProps) => {
  const headerRef = useRef<HTMLDivElement>(null);
  const headerShown = useInView(headerRef);
  const baseClass = dark ? "ds-section ds-section-dark" : "ds-section";

  return (
    <section id={id} className={baseClass}>
      <div className="ds-section-shell">
        <div
          ref={headerRef}
          className="ds-section-header"
          data-shown={headerShown ? "" : undefined}
        >
          <div className="ds-section-meta">
            {eyebrow && (
              <p
                className="ds-eyebrow ds-type"
                style={
                  {
                    ...stagger(0.02),
                    "--n": eyebrow.length,
                  } as CSSProperties
                }
              >
                {eyebrow}
              </p>
            )}

            <h2 className="ds-section-title">
              <TextDiffuseReveal text={title} />
            </h2>

            {description && (
              <p
                className="ds-section-description ds-reveal"
                style={stagger(0.1)}
              >
                {description}
              </p>
            )}

            <DrawLine delay={0.16} />
          </div>

          {/* <div>, não <aside>: dentro de <main> um <aside> vira landmark "complementary" fora do nível do topo
              (axe: landmark-complementary-is-top-level); o conteúdo é um detalhe do cabeçalho, não uma região */}
          {aside && (
            <div className="ds-reveal" style={stagger(0.18)}>
              {aside}
            </div>
          )}
        </div>

        {!disableChildrenAnimation ? (
          <Reveal y={40} duration={0.9} delay={0.12}>
            <div>{children}</div>
          </Reveal>
        ) : (
          <div>{children}</div>
        )}
      </div>
    </section>
  );
};