type ProductEmptyStateProps = {
  title?: string;
  description?: string;
};

export default function ProductEmptyState({
  title = "محصولی پیدا نشد",
  description = "با فیلترهای انتخاب‌شده نتیجه‌ای وجود ندارد. فیلترها را تغییر دهید یا همه را پاک کنید.",
}: ProductEmptyStateProps) {
  return (
    <div
      dir="rtl"
      className="mx-auto flex w-full max-w-[1920px] flex-col items-center justify-center px-4 py-20 text-center sm:px-6 sm:py-28 lg:px-[120px] lg:py-32"
      role="status"
    >
      <div className="flex size-24 items-center justify-center rounded-full border border-[#818181]/35 bg-[#f7f7f7] sm:size-28">
        <svg
          width="40"
          height="40"
          viewBox="0 0 24 24"
          fill="none"
          aria-hidden
          className="text-[#818181]"
        >
          <path
            d="M4 7h16l-1.2 12.2A2 2 0 0 1 16.81 21H7.19a2 2 0 0 1-1.99-1.8L4 7Z"
            stroke="currentColor"
            strokeWidth="1.5"
          />
          <path
            d="M9 10v7M15 10v7M8 7l1.2-2.4A1 1 0 0 1 10.1 4h3.8a1 1 0 0 1 .9.6L16 7"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
          />
        </svg>
      </div>
      <h2 className="mt-6 text-xl font-normal text-ink sm:text-2xl">{title}</h2>
      <p className="mt-3 max-w-md text-sm font-light leading-7 text-[#6a6a6a] sm:text-base">
        {description}
      </p>
    </div>
  );
}