import type { ReactNode } from "react";

export type ConsolidationCalloutProps = {
  title: string;
  icon?: ReactNode;
  children: ReactNode;
  className?: string;
};

/** 통합·전략 권고 등 강조 CTA 블록 — 리포트 채널 섹션 공통 */
export function ConsolidationCallout({
  title,
  icon,
  children,
  className = "",
}: ConsolidationCalloutProps) {
  return (
    <div
      className={`mt-8 rounded-2xl bg-gradient-to-r from-violet-700 to-navy-950 p-6 md:p-8 text-white animate-fade-in-up animation-delay-300 ${className}`.trim()}
    >
      <div className="flex items-start gap-3">
        {icon ? (
          <div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center shrink-0 text-white [&_svg]:block">
            {icon}
          </div>
        ) : null}
        <div className="min-w-0">
          <h4 className="font-serif headline-24 mb-2 break-keep">{title}</h4>
          <div className="body-14 text-lavender-200 leading-relaxed break-keep">{children}</div>
        </div>
      </div>
    </div>
  );
}