import type { ReactNode } from "react";

type Props = {
  children: ReactNode;
  /** Tooltip khi đoạn rất dài (độc lập readability). */
  title?: string;
  className?: string;
};

export function NarrativeParagraph({ children, title, className }: Props) {
  return (
    <p
      title={title}
      className={`ctkp-narrative-body font-ctkp-serif text-[16px] font-normal leading-[1.88] tracking-[0.01em] text-[color:var(--ctkp-narrative-ink)] antialiased md:text-[18px] md:leading-[2] [&>span]:font-[inherit] ${className ?? ""}`}
    >
      {children}
    </p>
  );
}