'use client';

import Image from 'next/image';
import Link from 'next/link';
import UserMenu from '@/components/UserMenu';
import { ActionButtons } from '@/components/ActionButtons';

interface PageHeaderProps {
  photosCount: number;
  isLoggedIn: boolean;
  selectedPhotoIds: number[];
  selectionMode: boolean;
  isBulkFavoriting: boolean;
  isPreparingDownload: boolean;
  onStartSlideshow: () => void;
  onTagSelected: () => void;
  onBulkFavorite: () => void;
  onDownloadSelected: () => void;
  onToggleSelectionMode: () => void;
}

export function PageHeader({
  photosCount,
  isLoggedIn,
  selectedPhotoIds,
  selectionMode,
  isBulkFavoriting,
  isPreparingDownload,
  onStartSlideshow,
  onTagSelected,
  onBulkFavorite,
  onDownloadSelected,
  onToggleSelectionMode,
}: PageHeaderProps) {
  return (
    <div className="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 pb-4 mb-4 border-b">
      <div className="mb-4 flex items-center justify-between">
        <Link href="/" aria-label="Home">
          <Image
            src="/logo.png"
            alt="PunimTag"
            width={300}
            height={80}
            className="h-20 w-auto cursor-pointer hover:opacity-80 transition-opacity"
            priority
          />
        </Link>
        <div className="flex items-center gap-2">
          <UserMenu />
        </div>
      </div>
      <div className="flex items-center justify-between gap-4">
        <p className="text-lg font-medium text-orange-600 dark:text-orange-500 tracking-wide">
          Browse our photo collection
        </p>
        <ActionButtons
          photosCount={photosCount}
          isLoggedIn={isLoggedIn}
          selectedPhotoIds={selectedPhotoIds}
          selectionMode={selectionMode}
          isBulkFavoriting={isBulkFavoriting}
          isPreparingDownload={isPreparingDownload}
          onStartSlideshow={onStartSlideshow}
          onTagSelected={onTagSelected}
          onBulkFavorite={onBulkFavorite}
          onDownloadSelected={onDownloadSelected}
          onToggleSelectionMode={onToggleSelectionMode}
        />
      </div>
    </div>
  );
}