"use client";

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

type RuleCardYProps = {
  eyebrow: string;
  title: ReactNode;
  body?: ReactNode;
  delay?: number;
  className?: string;
};

/**
 * Side-stripe rule card. The accent left border carries lecture weight.
 * Use sparingly (≤ once per slide). On feature slides switch eyebrow color via prop.
 *
 * Side-stripe is generally an antipattern in product UI but is retained here as
 * a deliberate editorial element. Do not duplicate by reflex.
 */
export function RuleCardY({ eyebrow, title, body, delay = 0, className }: RuleCardYProps) {
  return (
    <Reveal direction="up" delay={delay} duration={0.4} className={cn("rule-card-y", className)}>
      <div className="eyebrow mb-4" style={{ color: "var(--accent-700)" }}>
        {eyebrow}
      </div>
      <div
        className="font-display"
        style={{
          fontSize: "clamp(22px, 2.4vw, 36px)",
          lineHeight: 1.2,
          letterSpacing: "-0.01em",
          color: "var(--ink-900)",
        }}
      >
        {title}
      </div>
      {body && (
        <p
          className="mt-5"
          style={{
            fontSize: "clamp(14px, 1.1vw, 17px)",
            lineHeight: 1.55,
            maxWidth: "780px",
            color: "var(--ink-700)",
          }}
        >
          {body}
        </p>
      )}
    </Reveal>
  );
}