/** StyleGallery consumer host adapters. Upstream component modules stay unchanged. */
import React, { createContext, useContext, useEffect, useState } from 'react';

const ThemeContext = createContext({ theme: 'light', resolvedTheme: 'light', systemTheme: 'light', setTheme: (_: string) => {} });
export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState(() => new URLSearchParams(location.search).get('theme') === 'dark' ? 'dark' : 'light');
  useEffect(() => {
    document.documentElement.classList.toggle('dark', theme === 'dark');
  }, [theme]);
  return <ThemeContext.Provider value={{ theme, resolvedTheme: theme, systemTheme: 'light', setTheme }}>{children}</ThemeContext.Provider>;
}
export const useTheme = () => useContext(ThemeContext);

export const Link = React.forwardRef<HTMLAnchorElement, any>(function Link({ children, href, prefetch, replace, scroll, shallow, locale, legacyBehavior, ...props }, ref) {
  return <a {...props} ref={ref}>{children}</a>;
});
export const Image = React.forwardRef<HTMLImageElement, any>(function Image({ src, fill, priority, quality, loader, unoptimized, placeholder, blurDataURL, ...props }, ref) {
  return <img {...props} ref={ref} src={typeof src === 'string' ? src : src?.src} style={{ ...(fill ? { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' } : {}), ...props.style }} />;
});