headquarter/apps/web/src/components/data-states.tsx

import { Icon } from "./icon";

interface LoadingStateProps {
  message?: string;
}

export const LoadingState = ({ message = "Loading..." }: LoadingStateProps) => (
  <p className="muted">{message}</p>
);

interface ErrorStateProps {
  message?: string;
  onRetry?: () => void;
}

export const ErrorState = ({ message = "Failed to load", onRetry }: ErrorStateProps) => (
  <div className="card card-md stack">
    <p>{message}</p>
    {onRetry && (
      <button className="secondary-button" onClick={onRetry} type="button">
        <Icon name="refresh" size="sm" />
        Retry
      </button>
    )}
  </div>
);

interface EmptyStateProps {
  message: string;
}

export const EmptyState = ({ message }: EmptyStateProps) => (
  <p className="muted">{message}</p>
);