import { useThemeSettings } from '@weaverse/hydrogen'

function useThemeSettings<T = HydrogenThemeSettings>(): T

import { useThemeSettings } from '@weaverse/hydrogen'

export function GlobalStyle() {
  const settings = useThemeSettings()
  
  if (settings) {
    const {
      bodyBaseSize,
      bodyBaseLineHeight,
      headingBaseSize,
      // more settings...
    } = settings

    return (
      <style
        dangerouslySetInnerHTML={{
          __html: `
            :root {
              --body-base-size: ${bodyBaseSize}px;
              --body-base-line-height: ${bodyBaseLineHeight};
              --heading-base-size: ${headingBaseSize}px;
            }
          `,
        }}
      />
    )
  }
  return null
}

import { useThemeSettings } from '@weaverse/hydrogen'

type MyThemeSettings = {
  colorPrimary: string;
  colorSecondary: string;
  buttonBorderRadius: number;
  navHeightMobile: number;
  bodyBaseSize: number;
  bodyBaseLineHeight: number;
  // other theme settings
}

export function Header() {
  const settings = useThemeSettings<MyThemeSettings>() 
  
  return (
    <header style={{ 
      height: `${settings.navHeightMobile}rem`,
      backgroundColor: settings.colorPrimary 
    }}>
      {/* Header content */}
    </header>
  )
}

import { useThemeSettings } from '@weaverse/hydrogen'

export function ProductCard() {
  const { showPrices, enableQuickView, productCardStyle } = useThemeSettings()
  
  return (
    <div className={`product-card ${productCardStyle}`}>
      {/* Product image */}
      
      {enableQuickView && (
        <button className="quick-view-button">Quick View</button>
      )}
      
      {showPrices && (
        <div className="price">$99.99</div>
      )}
    </div>
  )
}