import { getOptionalErrorMessage } from '@/shared/errors/errorMessages';
import { StatePanel } from '@/components/ui/state-panel';
import type { FrameModuleViewProps } from '@/components/frame/types';

export function FrameLoadingPanel() {
  return (
    <div className="flex items-center justify-center py-20">
      <StatePanel tone="violet" alignment="center" loading className="border-0 bg-transparent p-0">
        Loading F.R.A.M.E. entries...
      </StatePanel>
    </div>
  );
}

export function FrameStatusPanel({ workflow }: FrameModuleViewProps) {
  const errorMessage = getOptionalErrorMessage(workflow.error);

  if (!errorMessage) {
    return null;
  }

  return (
    <StatePanel title="F.R.A.M.E. data is unavailable" tone="red" role="alert">
      {errorMessage}
    </StatePanel>
  );
}
