import React from "react";
import { RooButton, RooButtonProps } from "../RooButton";
import { Alert, AlertLeftContainer } from "./RooAlertStyles";

export interface RooAlertProps {
  alertBody?: React.ReactNode;
  actionButtonProps?: RooButtonProps;
  alertStatus?: "warning" | "error";
  avatar?: string;
}

const alertIcon = new URL("./assets/alertIcon.svg", import.meta.url).href;
const warningAlertIcon = new URL(
  "./assets/warningAlertIcon.svg",
  import.meta.url
).href;
const errorAlertIcon = new URL("./assets/errorAlertIcon.svg", import.meta.url)
  .href;

export const RooAlert: React.FC<RooAlertProps> = (props) => {
  const { alertBody, actionButtonProps, alertStatus, avatar } = props;
  let icon = alertIcon;
  if (alertStatus === "warning") icon = warningAlertIcon;
  if (alertStatus === "error") icon = errorAlertIcon;
  const iconImage = avatar ? avatar : icon;
  return (
    <Alert {...props}>
      <AlertLeftContainer>
        <img src={iconImage} />
        {alertBody}
      </AlertLeftContainer>
      <RooButton {...actionButtonProps} buttonType="primary" size="small" />
    </Alert>
  );
};
