"use client";

import { layoutStyles } from "../styles/shared";
import { useTranslation } from "../hooks/useTranslation";

interface LoadingStateProps {
  /** Custom loading message (default: uses translation) */
  message?: string;
}

/**
 * Standard loading state component.
 * Displays a centered loading message with consistent styling.
 */
export function LoadingState({ message }: LoadingStateProps) {
  const t = useTranslation("common");
  const displayMessage = message || t("loading");

  return (
    <main style={layoutStyles.main}>
      <div style={layoutStyles.loader}>{displayMessage}</div>
    </main>
  );
}