import React, { ElementRef, forwardRef } from "react"
import { IconComponent, IconProps } from "../../icons"
import { classNames } from "../../utils"
import { Flex, FlexProps } from "../Flex"
import { FlexColumn, FlexColumnProps } from "../FlexColumn"
import { Text, TextBodyProps } from "../Text"

export type AlertProps = FlexProps

const AlertBase = forwardRef<ElementRef<typeof Flex>, AlertProps>(
  function Alert({ className, ...rest }, ref) {
    return (
      <Flex
        className={classNames(
          "gap-3 rounded-xl bg-bg-additional-1",
          "p-5 lg:p-6",
          className,
        )}
        ref={ref}
        role="alert"
        {...rest}
      />
    )
  },
)

export const AlertIcon = ({
  value: IconComponent,
  ...rest
}: IconProps & { value: IconComponent }) => {
  return <IconComponent {...rest} />
}

export const AlertContent = forwardRef<
  ElementRef<typeof FlexColumn>,
  FlexColumnProps
>(function AlertContent({ className, ...rest }, ref) {
  return (
    <FlexColumn
      className={classNames("gap-0.5", className)}
      ref={ref}
      {...rest}
    />
  )
})

export const AlertTitle = forwardRef<ElementRef<typeof Text>, TextBodyProps>(
  function AlertTitle({ weight = "semibold", ...rest }, ref) {
    return <Text ref={ref} weight={weight} {...rest} />
  },
)

export const AlertDescription = forwardRef<
  ElementRef<typeof Text>,
  TextBodyProps
>(function AlertDescription(props, ref) {
  return <Text color="text-secondary" ref={ref} {...props} />
})

/**
 * Displays a callout for user attention.
 */
export const Alert = Object.assign(AlertBase, {
  Icon: AlertIcon,
  Content: AlertContent,
  Title: AlertTitle,
  Body: AlertDescription,
})