"use strict";

import React, { createContext, useContext } from 'react';
import { StyleSheet, View } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { Text as BaseText } from "../typography/index.js";
import { Button as BaseButton } from "../button/index.js";
import { CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon } from "../icons/CircleInfo.js";
import { CircleX_Stroke2_Corner0_Rounded as CircleXIcon } from "../icons/CircleX.js";
import { Warning_Stroke2_Corner0_Rounded as WarningIcon } from "../icons/Warning.js";
import { EmojiSad_Stroke2_Corner0_Rounded as EmojiSadIcon } from "../icons/Emoji.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const AdmonitionContext = /*#__PURE__*/createContext({
  type: 'info'
});
AdmonitionContext.displayName = 'AdmonitionContext';
const ICON_MAP = {
  info: CircleInfoIcon,
  tip: CircleInfoIcon,
  warning: WarningIcon,
  error: CircleXIcon,
  apology: EmojiSadIcon
};
export function Icon() {
  const theme = useTheme();
  const {
    type
  } = useContext(AdmonitionContext);
  const IconComponent = ICON_MAP[type];
  const fillMap = {
    info: theme.colors.textSecondary,
    tip: theme.colors.primary,
    warning: theme.colors.warning,
    error: theme.colors.error,
    apology: theme.colors.textSecondary
  };
  return /*#__PURE__*/_jsx(IconComponent, {
    fill: fillMap[type],
    size: "md"
  });
}
Icon.displayName = 'Admonition.Icon';
export function Content({
  children,
  style
}) {
  return /*#__PURE__*/_jsx(View, {
    style: [styles.content, style],
    children: children
  });
}
Content.displayName = 'Admonition.Content';
export function Text({
  children,
  style
}) {
  return /*#__PURE__*/_jsx(BaseText, {
    style: style ? [styles.text, style] : styles.text,
    children: children
  });
}
Text.displayName = 'Admonition.Text';
export function Button({
  children,
  ...props
}) {
  return /*#__PURE__*/_jsx(BaseButton, {
    size: "small",
    ...props,
    children: children
  });
}
Button.displayName = 'Admonition.Button';
export function Row({
  children,
  style
}) {
  return /*#__PURE__*/_jsx(View, {
    style: [styles.row, style],
    children: children
  });
}
Row.displayName = 'Admonition.Row';
export function Outer({
  children,
  type = 'info',
  style
}) {
  const theme = useTheme();
  const borderColorMap = {
    info: theme.colors.border,
    tip: theme.colors.primary,
    warning: theme.colors.warning,
    error: theme.colors.error,
    apology: theme.colors.border
  };
  return /*#__PURE__*/_jsx(AdmonitionContext.Provider, {
    value: {
      type
    },
    children: /*#__PURE__*/_jsx(View, {
      style: [styles.outer, {
        borderColor: borderColorMap[type],
        backgroundColor: theme.colors.background
      }, style],
      children: children
    })
  });
}
Outer.displayName = 'Admonition.Outer';

/**
 * Simple all-in-one Admonition component for common use cases.
 * For more control, compose with Outer, Row, Icon, Content, Text, and Button.
 */
export function Admonition({
  children,
  type,
  style
}) {
  return /*#__PURE__*/_jsx(Outer, {
    type: type,
    style: style,
    children: /*#__PURE__*/_jsxs(Row, {
      children: [/*#__PURE__*/_jsx(Icon, {}), /*#__PURE__*/_jsx(Content, {
        children: /*#__PURE__*/_jsx(Text, {
          children: children
        })
      })]
    })
  });
}
Admonition.displayName = 'Admonition';
const styles = StyleSheet.create({
  outer: {
    padding: 12,
    borderRadius: 8,
    borderWidth: 1
  },
  row: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: 8
  },
  content: {
    gap: 8,
    flex: 1,
    minHeight: 20,
    justifyContent: 'center'
  },
  text: {
    fontSize: 14,
    lineHeight: 20,
    paddingRight: 12
  }
});
//# sourceMappingURL=index.js.map