import { useState } from "react";
import {
  FiInfo,
  FiX,
  FiCheckCircle,
  FiAlertTriangle,
} from "react-icons/fi";

import styles from "./dashboard-message.module.scss";

interface DashboardMessageProps {
  message: {
    type?: "info" | "success" | "danger" | "warning";
    title: string;
    message: string;
  };

  createdAt?: string;
}

const DashboardMessage = ({
  message,
  createdAt,
}: DashboardMessageProps) => {
  const [hidden, setHidden] = useState(false);

  if (
    hidden ||
    !message ||
    !message.title ||
    !message.message
  ) {
    return null;
  }

  const type = message?.type || "info";

  const renderIcon = () => {
    switch (type) {
      case "success":
        return <FiCheckCircle size={14} />;

      case "danger":
        return <FiAlertTriangle size={14} />;

      case "warning":
        return <FiAlertTriangle size={14} />;

      default:
        return <FiInfo size={14} />;
    }
  };

  return (
    <div
      className={`${styles.messageCard} ${
        styles[`messageCard--${type}`]
      }`}
    >
      <div className={styles.messageCard__left}>
        <div className={styles.messageCard__icon}>
          {renderIcon()}
        </div>

        <div className={styles.messageCard__content}>
          <div className={styles.messageCard__header}>
            <h4>{message.title}</h4>

            {createdAt && (
              <span>{createdAt}</span>
            )}
          </div>

          <p>{message.message}</p>
        </div>
      </div>

      <button
        type="button"
        className={styles.messageCard__close}
        onClick={() => setHidden(true)}
      >
        <FiX size={16} />
      </button>
    </div>
  );
};

export default DashboardMessage;