"use client"

import type { IAlertProps } from "./Alert.d"
import type { JSX } from "react"

import { Callout } from "@radix-ui/themes"
import { AlertCircle, CheckCircle, Info, TriangleAlert } from "lucide-react"
import { forwardRef } from "react"

const variantMap = {
	info: { color: "blue", Icon: Info },
	success: { color: "green", Icon: CheckCircle },
	warning: { color: "yellow", Icon: TriangleAlert },
	danger: { color: "red", Icon: AlertCircle },
} as const

export const Alert = forwardRef<HTMLDivElement, IAlertProps>(
	({ variant = "info", children, ...props }, ref): JSX.Element => {
		const { color, Icon } = variantMap[variant]

		return (
			<Callout.Root ref={ref} color={color} role="alert" {...props}>
				<Callout.Icon>
					<Icon size={16} />
				</Callout.Icon>
				<Callout.Text>{children}</Callout.Text>
			</Callout.Root>
		)
	},
)

Alert.displayName = "Alert"