examjam-frontend/components/DestructibleAlert.tsx

import React, { JSX } from "react";

interface DestructibleAlertProps {
  variant?: "error" | "warning" | "alert";
  text: string;
  icon?: JSX.Element;
}

const DestructibleAlert: React.FC<DestructibleAlertProps> = ({
  variant,
  text,
  icon,
}) => {
  return (
    <div
      className={`${
        variant === "error"
          ? "bg-red-200"
          : variant === "warning"
          ? "bg-yellow-200"
          : "bg-green-200"
      } rounded-3xl py-6 flex flex-col items-center justify-center gap-2 w-full `}
    >
      <div>{icon}</div>
      <p
        className={`text-lg font-bold text-center ${
          variant === "error"
            ? "text-red-800"
            : variant === "warning"
            ? "text-yellow-800"
            : "text-green-800"
        }`}
      >
        {text}
      </p>
    </div>
  );
};

export default DestructibleAlert;