import { Card } from "@/components/ui/card";
import { IoIosCloseCircle } from "react-icons/io";
import { getTranslations } from "next-intl/server";

export default async function FailedMessageCard() {
  const t = await getTranslations("FailedPage");

  return (
    <Card className="gap-5">
      <div className="flex items-center gap-2.5">
        <span className="mt-1 sm:mt-2 flex items-center justify-center">
          <IoIosCloseCircle className="text-[24px] sm:text-[32px] text-error-lighter" />
        </span>
        <span className="text-[20px] sm:text-[32px] font-bold text-error-lighter">
          {t("title")}
        </span>
      </div>
      <div className="text-[14px] sm:text-[20px] font-bold">
        <p>{t("description1")}</p>
        <p>{t("description2")}</p>
      </div>
    </Card>
  );
}