type ProductEmptyStateProps = {
  titleFa?: string;
  titleEn?: string;
};

export default function ProductEmptyState({
  titleFa = "متاسفیم، بر اساس جستجوی شما، محصولی وجود ندارد",
  titleEn = "We're sorry. There is no result based on your criteria",
}: ProductEmptyStateProps) {
  return (
    <div
      className="mx-auto mb-16 w-full max-w-[1920px] px-4 sm:mb-20 sm:px-6 lg:mb-24 lg:px-[120px]"
      role="status"
    >
      <div
        className="flex flex-col items-center justify-center rounded-[5px] border border-[#ececec] px-5 py-10 text-center sm:px-8 sm:py-12"
        style={{
          backgroundColor: "#fafafa",
          backgroundImage:
            "radial-gradient(circle, rgba(10,10,10,0.06) 0.8px, transparent 1px)",
          backgroundSize: "14px 14px",
        }}
      >
        <h2
          dir="rtl"
          className="max-w-2xl font-doran text-base font-medium leading-8 text-ink sm:text-lg sm:leading-9"
        >
          {titleFa}
        </h2>
        <p
          dir="ltr"
          className="mt-2.5 max-w-xl font-montserrat text-[11px] font-light uppercase tracking-[0.14em] text-[#9a9a9a] sm:text-xs sm:tracking-[0.16em]"
        >
          {titleEn}
        </p>
      </div>
    </div>
  );
}