import { useTranslations } from "next-intl";
import NotData from "@/public/assets/images/noData.png";
import MediaWithFallback from "@/shared/MediaWithFallback";

export default function EmptyData() {
  const t = useTranslations();
  return (
    <div className="h-fit grid items-center lg:py-20 py-36">
      <div className="flex justify-center flex-col items-center">
        <MediaWithFallback
          width="500"
          height="500"
          src={NotData}
          alt="not found icon"
          className="w-[200px] h-[200px] object-contain"
          loading="lazy"
        />
        <h2 className="text-center font-bold lg:text-2xl text-lg my-4 text-primary">
          {t("validations.No data available")}
        </h2>
      </div>
    </div>
  );
}