import Image from "next/image";
import React from "react";

import NoData from "@/assets/svg/images/no-data.svg";
import { Button } from "@/components/ui/button/button";
import Card from "@/components/ui/card/card";
import { useLocale } from "@/hooks/useLocale";

type Props = {
  text?: string;
  onClearFilter?: () => void;
};

const NoListData = (props: Props) => {
  const { t } = useLocale();
  return (
    <Card className="flex flex-col items-center justify-center gap-4 py-36">
      <Image src={NoData} alt="No data svg" width={96} height={96} />
      <p className="font-medium text-gray-500 ">
        {/* @todo - add translation for this area */}
        {props.text ||
          t(
            "There are no results for the selected filters. Please try again with different filters.",
          )}
      </p>
      {props.onClearFilter && (
        <Button variant="outline-primary" onClick={props?.onClearFilter}>
          {t("Clear filters")}
        </Button>
      )}
    </Card>
  );
};

export default NoListData;