import Row from "@/src/components/twui/layout/Row";
import Span from "@/src/components/twui/layout/Span";
import { CircleCheck, Info, TriangleAlert, type LucideIcon } from "lucide-react";
import type { ReactNode } from "react";
import { twMerge } from "tailwind-merge";

type Tone = "error" | "success" | "warning" | "info";

type Props = {
    tone: Tone;
    msg: ReactNode;
    className?: string;
};

const ToneStyles: Record<Tone, { className: string; Icon: LucideIcon }> = {
    error: {
        className: "border-error/30 bg-error/5 text-error dark:text-error-dark",
        Icon: TriangleAlert,
    },
    success: {
        className: "border-success/30 bg-success/5 text-success dark:text-success-dark",
        Icon: CircleCheck,
    },
    warning: {
        className: "border-warning/30 bg-warning/5 text-warning dark:text-warning-dark",
        Icon: TriangleAlert,
    },
    info: {
        className: "border-line bg-surface-2 text-muted",
        Icon: Info,
    },
};

export default function InlineAlert({ tone, msg, className }: Props) {
    const { className: toneClassName, Icon } = ToneStyles[tone];

    return (
        <Row
            role={tone == "error" ? "alert" : "status"}
            className={twMerge(
                "w-full gap-2 flex-nowrap items-start px-3 py-2 rounded-default border",
                toneClassName,
                className,
            )}
        >
            <Icon size={15} className="shrink-0 mt-0.5" />
            <Span className="text-[15px] leading-snug">{msg}</Span>
        </Row>
    );
}