import React from 'react';
import { Link } from 'react-router-dom';
import { ThemeToggle } from '../ThemeToggle';

export function MinimalHeader() {
  const storeLogo = (window as any).woonoowCustomer?.storeLogo;
  const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'Store';

  return (
    <header className="minimal-header bg-white border-b py-4">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-[1fr_auto_1fr] items-center">
          <div />
          <Link to="/shop" className="flex items-center gap-2">
            {storeLogo ? (
              <img 
                src={storeLogo} 
                alt={storeName} 
                className="h-8 object-contain !max-w-[300px]" 
              />
            ) : (
              <span className="text-xl font-semibold text-gray-900">{storeName}</span>
            )}
          </Link>
          <div className="flex justify-end">
            <ThemeToggle />
          </div>
        </div>
      </div>
    </header>
  );
}
