"use client"
import Image from "next/image"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { SASModal } from "./SASModal"

import type { ReactNode } from "react"

export function GenericError({
  title,
  variant = "error",
  children,
}: {
  title: ReactNode
  variant?: "error" | "info"
  children: ReactNode
}) {
  return (
    <SASModal>
      {variant === "error" ? (
        <MaterialIcon
          icon="cancel"
          isFilled
          size={64}
          color="Icon/Feedback/Error"
        />
      ) : (
        <Image
          src="/_static/img/scandic-loyalty-time.svg"
          alt=""
          width={140}
          height={110}
          style={{ marginTop: 16 }}
        />
      )}
      <Typography variant="Title/Subtitle/lg">
        <h1>{title}</h1>
      </Typography>
      {children}
    </SASModal>
  )
}
