import { useEffect } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { Gallery } from './pages/Gallery';
import { useSettings } from './hooks/useSettings';

function FaviconUpdater() {
  const { data: settings } = useSettings();

  useEffect(() => {
    const logoUrl = settings?.logo_url;
    if (!logoUrl) return;

    let link = document.querySelector<HTMLLinkElement>('link[rel~="icon"]');
    if (!link) {
      link = document.createElement('link');
      link.rel = 'icon';
      document.head.appendChild(link);
    }
    link.href = logoUrl;
  }, [settings?.logo_url]);

  return null;
}

export default function App() {
  return (
    <>
      <FaviconUpdater />
      <Routes>
        <Route path="/" element={<Gallery />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </>
  );
}