src/shared/components/docs/Callout.tsx

"use client";

import React from "react";
import { cn } from "@/shared/utils/cn";
import { DOCS_TOKENS } from "./tokens";

type CalloutType = "info" | "warning" | "danger";

interface CalloutProps {
  type: CalloutType;
  title: string;
  children: React.ReactNode;
  className?: string;
}

export default function Callout({ type, title, children, className }: CalloutProps) {
  const theme = DOCS_TOKENS.colors[type];

  return (
    <div

      role="note"

      aria-labelledby="callout-title"

      className={cn(

        "relative overflow-hidden rounded-lg border-l-4 p-4 my-4 transition-colors",

        "bg-bg-subtle border-border",

        className

      )}

      style={{ borderLeftColor: theme.border }}

    >

      <div className="flex items-start gap-3">

        <div id="callout-title" className="font-semibold text-sm text-text-main">

          {title}

        </div>

        <div className="text-sm leading-relaxed text-text-muted">{children}</div>

      </div>

    </div>
  );
}