'use client';

import { ReactNode } from 'react';
import { useLocalization } from '@akinon/next/hooks';
import { useOnlineStatus } from '@theme/hooks/use-online-status';

interface OfflineFallbackProps {
  children: ReactNode;
}

export const OfflineFallback = ({ children }: OfflineFallbackProps) => {
  const isOnline = useOnlineStatus();
  const { t } = useLocalization();

  if (isOnline) return <>{children}</>;

  return (
    <div
      role="status"
      aria-live="polite"
      className="flex flex-col items-center justify-center min-h-[60vh] px-4 py-16 text-center"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={1.5}
        strokeLinecap="round"
        strokeLinejoin="round"
        className="w-16 h-16 mb-6 text-gray-400"
        aria-hidden="true"
      >
        <line x1="1" y1="1" x2="23" y2="23" />
        <path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55" />
        <path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39" />
        <path d="M10.71 5.05A16 16 0 0 1 22.58 9" />
        <path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88" />
        <path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
        <line x1="12" y1="20" x2="12.01" y2="20" />
      </svg>
      <h2 className="text-2xl font-semibold mb-3">
        {t('common.network.offline.title')}
      </h2>
      <p className="text-gray-600 max-w-md">
        {t('common.network.offline.message')}
      </p>
    </div>
  );
};