import React from "react";
import { AlertCardProps } from "./types";

import { MaterialIcon } from "@shared/components/material-icon";
import { Text } from "@shared/components/text";
import { cx } from "@shared/utils";

export const AlertCard: React.FC<AlertCardProps> = ({
  errorMessage,
  className,
  iconClassName,
  iconSize = 52,
  iconName = "dangerous",
  textVariant,
}) => {
  if (!errorMessage) return null;

  return (
    <div
      className={cx(
        "flex flex-col items-center justify-center gap-5 rounded-surface-sm border-2 border-border-critical bg-bg-fill-critical-secondary px-4 py-6 md:flex-row md:py-4",
        className
      )}
      data-testid="alert-card"
    >
      <div>
        <MaterialIcon
          name={iconName}
          size={iconSize}
          className={cx("text-icon-critical", iconClassName)}
        />
      </div>

      <Text className={cx("body2 text-text", textVariant)}>{errorMessage}</Text>
    </div>
  );
};

AlertCard.displayName = "AlertCard";

export type { AlertCardProps };