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

import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
import Title from "@/components/TempDesignSystem/Text/Title"

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" ? (
        <ErrorCircleFilledIcon height={64} width={64} color="red" />
      ) : (
        <Image
          src="/_static/img/scandic-loyalty-time.svg"
          alt=""
          width={140}
          height={110}
          style={{ marginTop: 16 }}
        />
      )}
      <Title as="h3" level="h1" textAlign="center" textTransform="regular">
        {title}
      </Title>
      {children}
    </SASModal>
  )
}