'use client';

import { Button } from '@/components/ui/button';
import { Play, Heart } from 'lucide-react';

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

export function ActionButtons({
  photosCount,
  isLoggedIn,
  selectedPhotoIds,
  selectionMode,
  isBulkFavoriting,
  isPreparingDownload,
  onStartSlideshow,
  onTagSelected,
  onBulkFavorite,
  onDownloadSelected,
  onToggleSelectionMode,
}: ActionButtonsProps) {
  if (photosCount === 0) {
    return null;
  }

  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button
        onClick={onStartSlideshow}
        className="flex items-center gap-2"
        size="sm"
      >
        <Play className="h-4 w-4" />
        Play Slides
      </Button>
      {isLoggedIn && (
        <>
          <Button
            variant="default"
            size="sm"
            onClick={onTagSelected}
            className="flex items-center gap-1 bg-blue-600 hover:bg-blue-700 text-white"
            disabled={selectedPhotoIds.length === 0}
          >
            Tag selected
            {selectedPhotoIds.length > 0
              ? ` (${selectedPhotoIds.length})`
              : ''}
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={onBulkFavorite}
            className="bg-orange-500 hover:bg-orange-600 text-white border-orange-500 hover:border-orange-600 flex items-center gap-1"
            disabled={selectedPhotoIds.length === 0 || isBulkFavoriting}
          >
            <Heart className="h-4 w-4" />
            {isBulkFavoriting ? 'Updating...' : 'Favorite selected'}
            {!isBulkFavoriting && selectedPhotoIds.length > 0
              ? ` (${selectedPhotoIds.length})`
              : ''}
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={onDownloadSelected}
            className="bg-blue-500 hover:bg-blue-600 text-white border-blue-500 hover:border-blue-600"
            disabled={selectedPhotoIds.length === 0 || isPreparingDownload}
          >
            {isPreparingDownload ? 'Preparing download...' : 'Download selected'}
            {!isPreparingDownload && selectedPhotoIds.length > 0
              ? ` (${selectedPhotoIds.length})`
              : ''}
          </Button>
          <Button
            variant={selectionMode ? 'secondary' : 'outline'}
            size="sm"
            onClick={onToggleSelectionMode}
            className={selectionMode ? 'bg-blue-400 hover:bg-blue-500 text-white border-blue-400 hover:border-blue-500' : 'bg-blue-400 hover:bg-blue-500 text-white border-blue-400 hover:border-blue-500'}
          >
            {selectionMode ? 'Done selecting' : 'Select'}
          </Button>
        </>
      )}
    </div>
  );
}