import { FunctionComponent } from "react";

export type MessageType = "error" | "warning" | "info" | "success";

type Props = {
  text: string;
  type: MessageType;
  className?: string;
  isSnackbar?: boolean;
  Action?: FunctionComponent;
  Animation?: FunctionComponent;
};
export const MessageBar = ({
  text,
  type,
  className,
  isSnackbar,
  Action,
  Animation,
}: Props) => {
  return (
    <div
      className={`my-5 mx-0 bg-t_bg_tertiary bg-opacity-10 rounded-2xl max-w-[500px] min-h-[43px] flex items-center text-xs font-medium text-t_text_primary border border-solid ${
        type === "error"
          ? "border-t_error_dark"
          : type === "warning"
          ? "border-t_warning_dark"
          : type === "info"
          ? "border-t_main_accent_dark"
          : type === "success"
          ? "border-t_success_dark"
          : ""
      } ${isSnackbar && "m-0"}`}
    >
      <p className="p-[15px]">{text}</p>
      {Animation && <Animation />}
      {Action && (
        <div
          className={`pl-4 fill-t_text_primary text-t_text_primary ${className}`}
        >
          <Action />
        </div>
      )}
    </div>
  );
};