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

import { AlertCircle } from "lucide-react";

type Props = {
  bannerName: string;
  description?: string;
};

export function IntegrationAndImportExportBanner({ bannerName, description }: Props) {
  return (
    <div className="flex items-start gap-3 border-b border-subtle py-3.5">
      <h3 className="text-18 font-medium">{bannerName}</h3>
      {description && (
        <div className="flex items-center gap-3 rounded-[10px] border border-accent-strong/75 bg-accent-primary/5 p-4 text-13 text-primary">
          <AlertCircle className="h-6 w-6 text-primary" />
          <p className="leading-5">{description}</p>
        </div>
      )}
    </div>
  );
}
