/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { AlertCircle, CheckCircle2 } from "lucide-react";

type TBanner = {
  type: "success" | "error";
  message: string;
};

export function Banner(props: TBanner) {
  const { type, message } = props;

  return (
    <div
      className={`w-full rounded-md border p-2 ${type === "error" ? "border-danger-strong bg-danger-subtle" : "border-success-strong bg-success-subtle"}`}
    >
      <div className="flex items-center justify-center">
        <div className="flex-shrink-0">
          {type === "error" ? (
            <span className="flex h-6 w-6 items-center justify-center rounded-full">
              <AlertCircle className="h-5 w-5 text-danger-primary" aria-hidden="true" />
            </span>
          ) : (
            <CheckCircle2 className="h-5 w-5 text-success-primary" aria-hidden="true" />
          )}
        </div>
        <div className="ml-1">
          <p className={`text-13 font-medium ${type === "error" ? "text-danger-primary" : "text-success-primary"}`}>
            {message}
          </p>
        </div>
      </div>
    </div>
  );
}