import errorbg from "@/public/assets/errorbg.svg";
import { useTranslations } from "next-intl";
import Link from "next/link";
type ErrorsCompProps = {
  title: string;
  description: string;
};  

const ErrorsComp = ({ title, description } : ErrorsCompProps) => {
  const t = useTranslations("Header");
  return (
    <div
      className="relative w-full min-h-screen bg-no-repeat bg-cover bg-top flex items-center justify-center z-[9999]"
      style={{
        backgroundImage: `url("/assets/errorbg.svg")`,
      }}
    >
      <div className="flex flex-col items-center gap-[23px] text-center z-10 px-4">
        <div className="flex flex-col items-center">
          <span className="text-dark text-[17px] lg:text-[25px] xl:text-[30px] 2xl:text-[40px] font-normal">
            {title}
          </span>
          <span className="text-paragraph text-[11px] lg:text-[12px] xl:text-[15px] 2xl:text-[20px] font-light">
            {description}
          </span>
        </div>

        <Link
          href="/"
          className="flex items-center justify-center bg-primary text-white w-[100px] h-[30px] lg:w-[170px] lg:h-[40px] 2xl:w-[236px] 2xl:h-[53px] rounded-[8px] xl:w-[200px] xl:h-[40px] text-[10px] lg:text-[12px] xl:text-[12px] 2xl:text-[14px]"
        >
          {t("backto")}
        </Link>
      </div>
    </div>
  );
};

export default ErrorsComp;




// // import errorsImg from "@/public/assets/error.png";
// import errorbg from "@/public/assets/errorbg.svg";
// import Image from "next/image";
// import Link from "next/link";

// const ErrorsComp = ({ title, description }) => {
//   return (
//     <div className="relative w-full min-h-screen overflow-hidden">
//       <Image
//         src={errorbg}
//         alt="errorsImg"
//         className="object-cover z-0 w-full h-full absolute inset-0"
//         layout="fill"
//       />
//       <div className="absolute inset-0 flex items-center justify-center z-10 px-4">
//         <div className="flex flex-col items-center gap-[23px] text-center max-w-[90%]">
//           <div className="flex flex-col items-center">
//             <span className="text-dark text-[17px] lg:text-[25px] xl:text-[30px] 2xl:text-[40px] font-normal">
//               {title}
//             </span>
//             <span className="text-paragraph text-[11px] lg:text-[12px] xl:text-[15px] 2xl:text-[20px] font-light">
//               {description}
//             </span>
//           </div>

//           <Link
//             href="/"
//             className="flex items-center justify-center bg-primary text-white w-[100px] h-[30px] lg:w-[170px] lg:h-[40px] 2xl:w-[236px] 2xl:h-[53px] rounded-[8px] xl:w-[200px] xl:h-[40px] text-[10px] lg:text-[12px] xl:text-[12px] 2xl:text-[14px]"
//           >
//             Back To Home
//           </Link>
//         </div>
//       </div>
//     </div>
//   );
// };

// export default ErrorsComp;






// // import errorsImg from "@/public/assets/error.png";
// import errorbg from "@/public/assets/errorbg.svg";
// import Image from "next/image";
// import Link from "next/link";

// const ErrorsComp = ({ title, description }) => {
//   return (
//     <div className="relative w-full min-h-screen overflow-hidden">
//       <Image
//         src={errorbg}
//         alt="errorsImg"
//         className="object-cover z-0 w-full h-full"
      
//       />
//       {/* <div className="absolute  top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2"> */}
//       <div className="absolute inset-0 flex items-center justify-center z-10 px-4">
//         <div className="flex flex-col items-center gap-[23px] text-center max-w-[90%]">
//           <div className="flex flex-col items-center">
//             <span className="text-dark text-[17px] lg:text-[25px] xl:text-[30px] 2xl:text-[40px] font-normal">
//               {title}
//             </span>
//             <span className="text-paragraph text-[11px] lg:text-[12px] xl:text-[15px] 2xl:text-[20px] font-light">
//               {description}
//             </span>
//           </div>

//           <Link
//             href="/"
//             className="flex items-center justify-center bg-primary text-white w-[100px] h-[30px] lg:w-[170px] lg:h-[40px] 2xl:w-[236px] 2xl:h-[53px] rounded-[8px] xl:w-[200px] xl:h-[40px] text-[10px] lg:text-[12px] xl:text-[12px] 2xl:text-[14px]"
//           >
//             Back To Home
//           </Link>
//         </div>
//       </div>
//     </div>
//   );
// };

// export default ErrorsComp;