Stirling-PDF/frontend/src/core/components/shared/InfoBanner.tsx

import React, { ReactNode } from "react";
import { Paper, Group, Text, Button, ActionIcon, Stack } from "@mantine/core";
import LocalIcon from "@app/components/shared/LocalIcon";

type InfoBannerTone = "info" | "warning";

const toneStyles: Record<
  InfoBannerTone,
  {
    background: string;
    border: string;
    text: string;
    icon: string;
    buttonColor: string;
  }
> = {
  info: {
    background: "var(--mantine-color-blue-0)",
    border: "var(--mantine-color-blue-2)",
    text: "var(--mantine-color-blue-9)",
    icon: "var(--mantine-color-blue-6)",
    buttonColor: "blue",
  },
  warning: {
    background: "var(--mantine-color-orange-0)",
    border: "var(--mantine-color-orange-3)",
    text: "var(--mantine-color-orange-9)",
    icon: "var(--mantine-color-orange-7)",
    buttonColor: "orange",
  },
};

interface InfoBannerProps {
  icon: string;
  title?: ReactNode;
  message: ReactNode;
  buttonText?: string;
  buttonIcon?: string;
  onButtonClick?: () => void;
  onDismiss?: () => void;
  dismissible?: boolean;
  loading?: boolean;
  show?: boolean;
  tone?: InfoBannerTone;
  background?: string;
  borderColor?: string;
  textColor?: string;
  iconColor?: string;
  buttonColor?: string;
  buttonVariant?: "light" | "filled" | "white" | "outline" | "subtle";
  minHeight?: number | string;
  closeIconColor?: string;
}

/**
 * Generic info banner component for displaying dismissible messages at the top of the app
 */
export const InfoBanner: React.FC<InfoBannerProps> = ({
  icon,
  title,
  message,
  buttonText,
  buttonIcon = "check-circle-rounded",
  onButtonClick,
  onDismiss,
  dismissible = true,
  loading = false,
  show = true,
  tone = "info",
  background,
  borderColor,
  textColor,
  iconColor,
  buttonColor,
  buttonVariant = "light",
  minHeight = 56,
  closeIconColor,
}) => {
  if (!show) {
    return null;
  }

  const toneStyle = toneStyles[tone] ?? toneStyles.info;
  const handleDismiss = () => {
    onDismiss?.();
  };

  return (
    <Paper
      p="sm"
      radius={0}
      style={{
        background: background ?? toneStyle.background,
        borderBottom: `1px solid ${borderColor ?? toneStyle.border}`,
        minHeight,
        display: "flex",
        alignItems: "center",
      }}
    >
      <Group gap="sm" align="center" wrap="nowrap" justify="space-between" style={{ width: "100%" }}>
        <Group gap="sm" align="center" wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
          <LocalIcon
            icon={icon}
            width="1.2rem"
            height="1.2rem"
            style={{ color: iconColor ?? toneStyle.icon, flexShrink: 0 }}
          />
          <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
            {title && (
              <Text fw={600} size="sm" style={{ color: textColor ?? toneStyle.text }}>
                {title}
              </Text>
            )}
            <Text fw={title ? 400 : 500} size="sm" style={{ color: textColor ?? toneStyle.text }} lineClamp={2}>
              {message}
            </Text>
          </Stack>
        </Group>
        <Group gap="xs" align="center" wrap="nowrap">
          {buttonText && onButtonClick && (
            <Button
              variant={buttonVariant}
              color={buttonColor ?? toneStyle.buttonColor}
              size="xs"
              onClick={onButtonClick}
              loading={loading}
              leftSection={<LocalIcon icon={buttonIcon} width="0.9rem" height="0.9rem" />}
            >
              {buttonText}
            </Button>
          )}
          {dismissible && (
            <ActionIcon
              variant="subtle"
              color={closeIconColor ? undefined : "gray"}
              size="sm"
              onClick={handleDismiss}
              aria-label="Dismiss"
              style={closeIconColor ? { color: closeIconColor } : undefined}
            >
              <LocalIcon icon="close-rounded" width="1rem" height="1rem" />
            </ActionIcon>
          )}
        </Group>
      </Group>
    </Paper>
  );
};