/**
 * About Page
 *
 * Displays information about credits and sponsors for the facility.
 * Content is editable by staff through PocketBase rich text editor.
 * Updates appear in real-time across all kiosks.
 */

/* Context */
import { useKioskData } from "@/contexts/kiosk-data-context";

/* Constants */
import { LOADING_MESSAGES, ERROR_MESSAGES, EMPTY_MESSAGES } from "@/constants/ui-text";

export function About() {
  const { about, loading, error } = useKioskData();

  /* Loading state */
  if (loading) {
    return (
      <main className="flex h-full items-center justify-center">
        <p className="text-muted-foreground">{LOADING_MESSAGES.content}</p>
      </main>
    );
  }

  /* Error state */
  if (error) {
    return (
      <main className="flex h-full items-center justify-center">
        <p className="text-destructive">{ERROR_MESSAGES.generic}</p>
      </main>
    );
  }

  /* Empty state - no about content created yet */
  if (!about) {
    return (
      <main className="flex h-full items-center justify-center">
        <p className="text-muted-foreground">{EMPTY_MESSAGES.noContent}</p>
      </main>
    );
  }

  return (
    <main className="flex h-full flex-col overflow-auto">
      <div className="prose prose-lg max-w-none" dangerouslySetInnerHTML={{ __html: about.content }} />
    </main>
  );
}