"use client";

import type { ReactNode } from "react";
import { Reveal } from "@/components/animations/reveal";

type QuoteDividerProps = {
  children: ReactNode;
  /** If true, renders white text + white rules (use inside feature slides). */
  inverse?: boolean;
  delay?: number;
};

/**
 * Tiny rule-text-rule unit. Use as a closing line in feature slides
 * (under a hero quote) or as a section meta-statement.
 */
export function QuoteDivider({ children, inverse = false, delay = 0.5 }: QuoteDividerProps) {
  const ruleColor = inverse ? "rgba(255,255,255,0.35)" : "var(--ink-300)";
  const textColor = inverse ? "rgba(255,255,255,0.6)" : "var(--ink-500)";
  return (
    <Reveal direction="up" delay={delay} duration={0.4}>
      <div className="flex items-center gap-4">
        <span className="h-px w-8" style={{ background: ruleColor }} aria-hidden />
        <p style={{ fontSize: 15, lineHeight: 1.5, color: textColor }}>{children}</p>
        <span className="h-px w-8" style={{ background: ruleColor }} aria-hidden />
      </div>
    </Reveal>
  );
}