import { css } from 'glamor';
import { observer } from 'mobx-react';
import { useApphouse } from '../context/useApphouse';
import { ThemeColors } from '../styles/defaults/themes.interface';
import { Elevation } from '../styles/defaults/elevation.styles';
import { setAlpha } from '../utils/color/setAlpha';

interface InlinePromptProps {
  children: React.ReactNode;
  /**
   * @default 0.2
   */
  backgroundOpacity?: number;
  /**
   * @default surface20
   */
  backgroundColor?: keyof ThemeColors;
}
export const InlinePrompt: React.FC<InlinePromptProps> = observer(
  ({ children, backgroundColor = 'surface20', backgroundOpacity = 0.2 }) => {
    const { theme } = useApphouse();
    const { styles, tokens, colors } = theme;
    return (
      <div
        {...css(styles.layout?.vertical, {
          border: `1px solid ${setAlpha(colors.onPrimary, backgroundOpacity)}`,
          padding: tokens.spacings.m,
          marginTop: tokens.spacings.m,
          marginBottom: tokens.spacings.m,
          backgroundColor: setAlpha(colors[backgroundColor], backgroundOpacity),
          justifyContent: 'flex-start',
          alignItems: 'flex-start',
          borderRadius: tokens.radius.default,
          ...Elevation.depth2
        })}
      >
        {children}
      </div>
    );
  }
);