import { cn } from '../../lib/utils';

interface GcxLoadingProps {
  fullScreen?: boolean;
  className?: string;
}

export function GcxLoading({ fullScreen = false, className }: GcxLoadingProps) {
  return (
    <div
      className={cn(
        'flex items-center justify-center bg-white dark:bg-slate-950',
        fullScreen ? 'fixed inset-0 z-50' : 'min-h-[24rem] w-full',
        className
      )}
      role="status"
      aria-live="polite"
      aria-label="Loading GCX"
    >
      <div className="gcx-loader text-center">
        <div className="gcx-loader__mark" aria-hidden="true">
          <span className="gcx-loader__letter text-red-600">G</span>
          <span className="gcx-loader__letter text-yellow-500">C</span>
          <span className="gcx-loader__letter text-green-600">X</span>
        </div>

        <div className="gcx-loader__rule" aria-hidden="true">
          <span className="bg-red-600" />
          <span className="bg-yellow-500" />
          <span className="bg-green-600" />
        </div>

        <div className="gcx-loader__tagline" aria-hidden="true">
          <span className="gcx-loader__phrase text-red-700 dark:text-red-400">
            Connecting Markets
          </span>
          <span className="gcx-loader__phrase text-yellow-700 dark:text-yellow-400">
            Connecting People
          </span>
          <span className="gcx-loader__phrase text-green-700 dark:text-green-400">
            Creating Opportunities
          </span>
        </div>

        <span className="sr-only">
          GCX. Connecting Markets, Connecting People, Creating Opportunities.
        </span>
      </div>
    </div>
  );
}