import { Skeleton } from "@/components/ui/skeleton";
import { __ } from "@wordpress/i18n";

/**
 * Placeholder cards while the settings load.
 */
const LoadingState = () => (
  <div
    role="status"
    aria-label={__("Loading settings", "product-comparison-for-woocommerce")}
    className="ino:flex ino:flex-col ino:gap-6"
  >
    {[0, 1].map((card) => (
      <div
        key={card}
        className="ino:flex ino:flex-col ino:gap-4 ino:rounded-xl ino:border ino:border-border ino:bg-card ino:p-6"
      >
        <Skeleton className="ino:h-5 ino:w-40" />
        <Skeleton className="ino:h-4 ino:w-2/3" />
        <Skeleton className="ino:h-4 ino:w-1/2" />
      </div>
    ))}
  </div>
);

export default LoadingState;