"use client";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
  type LocaledStringKey,
  type LocaleFunctionPrimitiveParam,
  useLocaleFunction,
} from "@/hooks/use-localed";
import {
  AlertOctagonIcon,
  InfoIcon,
  MessageCircleQuestionIcon,
} from "lucide-react";
import type { ComponentProps, ReactElement, ReactNode } from "react";

const icons = {
  info: <InfoIcon />,
  "alert-octagon": <AlertOctagonIcon />,
  "message-circle-question": <MessageCircleQuestionIcon />,
};

export function LabAlert({
  variant,
  icon,
  title,
  description,
  descriptionParams,
  children,
}: {
  icon?: keyof typeof icons;
  title?: LocaledStringKey;
  description?: LocaledStringKey;
  descriptionParams?: (ReactElement | LocaleFunctionPrimitiveParam)[];
  children?: ReactNode;
} & Pick<ComponentProps<typeof Alert>, "variant">) {
  const t = useLocaleFunction();
  const selectedIcon = icon ? icons[icon] : null;
  return (
    <Alert variant={variant} className="[&>svg:first-of-type]:stroke-1">
      {selectedIcon}
      {title != null && (
        <AlertTitle className="font-semibold">{t(title)}</AlertTitle>
      )}
      {description != null && (
        <AlertDescription>
          {t(description, ...(descriptionParams ?? []))}
        </AlertDescription>
      )}
      {children != null && <div className="mt-4">{children}</div>}
    </Alert>
  );
}