import { cn } from "@/lib/utils";
import { Sparkles, Info, Quote } from "lucide-react";

export interface CalloutBoxProps {
  title?: string;
  tone?: "gold" | "neutral" | "highlight" | string;
  children: React.ReactNode;
  className?: string;
}

export default function CalloutBox({
  title,
  tone = "gold",
  children,
  className,
}: CalloutBoxProps) {
  const isGold = tone === "gold";
  const isHighlight = tone === "highlight";

  return (
    <aside
      aria-label={title || "Callout note"}
      className={cn(
        "my-8 rounded-2xl p-6 transition-all duration-200",
        isGold && "bg-brand-sand/60 border-l-4 border-brand-gold shadow-xs",
        isHighlight && "bg-brand-dark text-white border-l-4 border-brand-gold shadow-md",
        !isGold && !isHighlight && "bg-white border border-brand-border border-l-4 border-l-brand-gold",
        className,
      )}
    >
      <div className="flex items-center gap-2.5 mb-2.5">
        <span
          className={cn(
            "w-6 h-6 rounded-full flex items-center justify-center text-xs",
            isHighlight ? "bg-brand-gold text-brand-dark" : "bg-brand-gold/20 text-brand-gold",
          )}
        >
          {isHighlight ? <Sparkles size={12} /> : <Quote size={12} />}
        </span>
        <h4
          className={cn(
            "font-title text-base font-bold tracking-wide",
            isHighlight ? "text-brand-gold" : "text-brand-dark",
          )}
        >
          {title || "Insider Editorial Note"}
        </h4>
      </div>

      <div
        className={cn(
          "text-sm leading-relaxed",
          isHighlight ? "text-stone-200" : "text-brand-dark/85",
        )}
      >
        {children}
      </div>
    </aside>
  );
}