// src/components/lexical/Callout.tsx
import type { ReactNode } from 'react'

export function Callout({
  title,
  variant = 'default',
  children,
}: {
  title?: string
  variant?: 'default' | 'note' | 'warning' | 'tip'
  children: ReactNode
}) {
  return (
    <aside
      className={`border-hair border-l-2 pl-4 my-6 callout callout-${variant}`}
      role="note"
    >
      {title && <div className="font-mono text-[11px] tracking-widest uppercase text-ink-3 mb-2">{title}</div>}
      <div>{children}</div>
    </aside>
  )
}