import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";

export const ErrorNotice = ({
  header,
  body,
  icon,
}: {
  header?: string;
  body?: string;
  icon?: boolean;
}) => {
  return (
    <>
      {header ? (
        <div className="mx-auto w-fit px-2">
          <div className="rounded-xl border border-red-300 bg-red-100 px-4 py-4 text-center font-semibold text-red-600">
            {icon ? (
              <div className="mx-auto grid place-items-center">
                <ExclamationTriangleIcon className="h-10 w-10" />
              </div>
            ) : undefined}
            <span className="text-lg font-semibold text-red-500">{header}</span>
            {body ? (
              <p className="mx-8 my-2 text-sm font-normal text-stone-600">
                {body}
              </p>
            ) : undefined}
          </div>
        </div>
      ) : undefined}
    </>
  );
};
