import React from 'react';

interface HeaderSectionProps {
  children: React.ReactNode;
  className?: string;
  align?: 'left' | 'center' | 'right';
}

export const HeaderSection: React.FC<HeaderSectionProps> = ({
  children,
  className = '',
  align = 'left'
}) => {
  const alignClasses = {
    left: 'justify-start',
    center: 'justify-center',
    right: 'justify-end'
  };

  return (
    <div className={`flex items-center gap-2 ${alignClasses[align]} ${className}`}>
      {children}
    </div>
  );
};

interface HeaderLayoutProps {
  children: React.ReactNode;
  className?: string;
  variant?: 'default' | 'map' | 'transparent';
}

export const HeaderLayout: React.FC<HeaderLayoutProps> = ({
  children,
  className = '',
  variant = 'default'
}) => {
  const variantClasses = {
    default: 'border-b bg-background/70 backdrop-blur shrink-0 z-20',
    map: 'border-b bg-background/70 backdrop-blur shrink-0 z-20',
    transparent: 'shrink-0 z-20'
  };

  return (
    <header className={`${variantClasses[variant]} ${className}`}>
      <div className="mx-auto max-w-full flex items-center justify-between flex-wrap px-4 py-3 gap-3">
        {children}
      </div>
    </header>
  );
};

export default HeaderLayout;