import * as React from 'react'

import { MediaQueries } from '../index'
import { StackView, StackViewProps } from '../StackView'

export type AlertProps = {
  /** Sets status theme colors. */
  type?: 'warning' | 'success' | 'error'
} & StackViewProps

type Props = React.RefAttributes<any> &
  React.HTMLAttributes<any> &
  AlertProps &
  MediaQueries<AlertProps>

export function Alert(props: Props) {
  const { children, type, ...restProps } = props
  return (
    <StackView
      padding={1}
      radius={3}
      // @ts-ignore
      stroke={`${type}-dark`}
      strokeAlign="inside"
      strokeWeight={1}
      color="dark-9"
      // @ts-ignore
      backgroundColor={`${type}-lighter`}
      {...restProps}
    >
      {children}
    </StackView>
  )
}

export default Alert