// Callout — coloured note box for docs content. Four variants matching
// the Fumadocs/Docusaurus convention: info (default), tip, warning,
// danger. Uses semantic CSS tokens so dark/light both work without
// per-variant overrides in app code.
//
// Usage:
//   <Callout type="warning" title="Heads up">
//     This API is still pre-release. Names + shape can change.
//   </Callout>

import type { ReactNode } from 'react'
import { cn } from '../cn'

type CalloutType = 'info' | 'tip' | 'warning' | 'danger' | 'note'

interface CalloutProps {
  readonly type?: CalloutType
  readonly title?: ReactNode
  readonly children: ReactNode
  readonly className?: string
}

const styles: Record<CalloutType, { ring: string; icon: string; iconPath: ReactNode }> = {
  info: {
    ring: 'border-info/30 bg-info/5 text-info',
    icon: 'text-info',
    iconPath: (
      <>
        <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.5" />
        <path d="M8 5.5 V8.5 M8 10.5 V11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      </>
    ),
  },
  tip: {
    ring: 'border-success/30 bg-success/5 text-success',
    icon: 'text-success',
    iconPath: (
      <>
        <path d="M5 8.5 L7 10.5 L11 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.5" />
      </>
    ),
  },
  warning: {
    ring: 'border-warning/30 bg-warning/5 text-warning',
    icon: 'text-warning',
    iconPath: (
      <>
        <path d="M8 2 L14 13 L2 13 Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
        <path d="M8 6.5 V9 M8 10.5 V11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      </>
    ),
  },
  danger: {
    ring: 'border-destructive/40 bg-destructive/5 text-destructive',
    icon: 'text-destructive',
    iconPath: (
      <>
        <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.5" />
        <path d="M5.5 5.5 L10.5 10.5 M10.5 5.5 L5.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      </>
    ),
  },
  note: {
    ring: 'border-border bg-card/40 text-muted-foreground',
    icon: 'text-muted-foreground',
    iconPath: (
      <>
        <rect x="2.5" y="2.5" width="11" height="11" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
        <path d="M5 6 H11 M5 8.5 H11 M5 11 H8.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      </>
    ),
  },
}

export const Callout = ({
  type = 'info', title, children, className,
}: CalloutProps): ReactNode => {
  const s = styles[type]
  return (
    <div className={cn('not-prose my-5 rounded-lg border px-4 py-3 flex gap-3', s.ring, className)}>
      <svg
        width="16" height="16" viewBox="0 0 16 16" fill="none"
        className={cn('shrink-0 mt-0.5', s.icon)}
        aria-hidden="true"
      >
        {s.iconPath}
      </svg>
      <div className="min-w-0 flex-1">
        {title ? (
          <div className="font-semibold text-foreground mb-1 leading-tight">{title}</div>
        ) : null}
        <div className="text-sm text-foreground/90 leading-relaxed">{children}</div>
      </div>
    </div>
  )
}