import React from "react";
import { Button, ButtonProps } from "../Button";
import { Alert as AlertStyle, AlertLeftContainer } from "./AlertStyles";

export interface AlertProps {
  alertBody?: React.ReactNode;
  actionButtonProps?: ButtonProps;
  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 Alert: React.FC<AlertProps> = (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 (
    <AlertStyle {...props}>
      <AlertLeftContainer>
        <img src={iconImage} />
        {alertBody}
      </AlertLeftContainer>
      <Button {...actionButtonProps} buttonType="primary" size="small" />
    </AlertStyle>
  );
};
