arbret/frontend/app/components/EmptyState.tsx

"use client";

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

interface EmptyStateProps {
  /** Message to display when empty */
  message: string;
  /** Optional hint/subtitle text */
  hint?: string;
  /** Show loading state instead of empty message */
  isLoading?: boolean;
  /** Optional action element (e.g., link or button) */
  action?: React.ReactNode;
  /** Custom style override */
  style?: React.CSSProperties;
}

/**
 * Standardized empty state component.
 * Displays a message when there's no data, or a loading state.
 */
export function EmptyState({ message, hint, isLoading, action, style }: EmptyStateProps) {
  const t = useTranslation("common");

  if (isLoading) {
    return <div style={{ ...utilityStyles.emptyState, ...style }}>{t("loading")}</div>;
  }

  return (
    <div style={{ ...utilityStyles.emptyState, ...style }}>
      <p style={styles.emptyText}>{message}</p>
      {hint && <p style={styles.emptyHint}>{hint}</p>}
      {action && <div style={styles.action}>{action}</div>}
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  emptyText: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.6)",
    fontSize: "1rem",
    margin: 0,
  },
  emptyHint: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.4)",
    fontSize: "0.85rem",
    marginTop: "0.5rem",
  },
  action: {
    marginTop: "1rem",
  },
};