Untitled

import React, { useState } from "react";
import PropTypes from "prop-types";
import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import "./MessageBar.css";
import { Success, AlertDiamondIcon, Warning } from "../../components/common/SVG_Icons";

const MessageBar = ({
  title,
  description,
  type = "error",
  variant = "single-line", // "single-line", "multi-line", "multi-line-collapsible"
  image = "",  //Assuming a svg component
  backgroundColor = "",
}) => {
  const [isCollapsed, setIsCollapsed] = useState(true);

  // Default styles for different alert types
  const alertStyles = {
    error: {
      image: <Warning />,
      backgroundColor: "#FECACA",
    },
    success: {
      image: <Success stroke="#001918" />,
      backgroundColor: "#E3F4F0",
    },
    warning: {
      image: <AlertDiamondIcon />,
      backgroundColor: "#FEE3AD",
    },
  };

  const currentStyle = alertStyles[type] || alertStyles.error;

  const handleToggle = () => {
    setIsCollapsed(!isCollapsed);
  };

  return (
    <div
      className={`alert-component alert-${type} d-flex ${variant === "single-line" ? "flex-row" : "flex-column"}`}
      style={{ backgroundColor: backgroundColor || currentStyle.backgroundColor }}
    >
      <div className="d-flex gap-2">
        <div className="alert-icon">
          {image ? image : currentStyle.image}
        </div>

        <div className={`d-flex gap-2 ${variant === "single-line" ? "flex-row" : "flex-column"} `}>
          <div className="d-flex align-items-center gap-2"> 
            <p className="alert-title">{title}</p>
            {variant === "multi-line-collapsible" && (isCollapsed ? <FontAwesomeIcon icon={faChevronDown} onClick={handleToggle} /> : <FontAwesomeIcon icon={faChevronUp} onClick={handleToggle} />)}

          </div>
          {variant === "single-line" && description.length && (
            <p>{description[0]}</p>
          )}

          {(variant === "multi-line") && description.length && (
            <div>
              {description.map(desc => <p>{desc}</p>)}
            </div>
          )}

          {(variant === "multi-line-collapsible") && description.length && (
            <div>
              {!isCollapsed && description.map(desc => <p>{desc}</p>)}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

MessageBar.propTypes = {
  type: PropTypes.oneOf(["error", "success", "warning"]),
  variant: PropTypes.oneOf(["single-line", "multi-line", "multi-line-collapsible"]),
  title: PropTypes.string,
  description: PropTypes.string,
  image: PropTypes.string,
  backgroundColor: PropTypes.string,
};

MessageBar.defaultProps = {
  type: "error",
  variant: "single-line",
  image: "",
  backgroundColor: ""
}

export default MessageBar;