'use client';

interface MarketplaceHeaderProps {
  viewMode: 'browse' | 'my-projects';
  setViewMode: (mode: 'browse' | 'my-projects') => void;
}

const MarketplaceHeader: React.FC<MarketplaceHeaderProps> = ({
  viewMode,
  setViewMode,
}) => {
  return (
    <div className='border-b border-border-primary bg-background-secondary px-6 py-4'>
      <div className='flex items-center justify-between'>
        <h1 className='text-xl font-semibold text-foreground-primary'>
          Marketplace
        </h1>

        <div className='flex items-center gap-4'>
          {/* View Mode Toggle */}
          <div className='flex items-center space-x-1 rounded-xl border border-border-primary bg-background-primary p-1.5 shadow-sm'>
            <button
              onClick={() => setViewMode('browse')}
              className={`rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 ${
                viewMode === 'browse'
                  ? 'bg-accent-brand text-white shadow-sm'
                  : 'text-foreground-secondary hover:bg-background-secondary hover:text-foreground-primary'
              }`}
            >
              Browse All
            </button>
            <button
              onClick={() => setViewMode('my-projects')}
              className={`rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 ${
                viewMode === 'my-projects'
                  ? 'bg-accent-brand text-white shadow-sm'
                  : 'text-foreground-secondary hover:bg-background-secondary hover:text-foreground-primary'
              }`}
            >
              My Projects
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MarketplaceHeader;