"use client";

import dynamic from "next/dynamic";

// Dynamically import PictogramSearch with no SSR to prevent hydration issues
const PictogramSearchClient = dynamic(
  () =>
    import("./PictogramSearch").then((mod) => ({
      default: mod.PictogramSearch,
    })),
  {
    ssr: false,
    loading: () => (
      <div
        className="loading-placeholder"
        style={{
          minHeight: "200px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        Loading pictograms...
      </div>
    ),
  },
);

export const PictogramSearchWrapper = () => {
  return <PictogramSearchClient />;
};