'use client';

import React from 'react';
import { Trash2, Archive, EyeOff } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface BulkActionsToolbarProps {
  selectedCount: number;
  onBulkAction: (action: 'delete' | 'mark-read' | 'mark-unread' | 'archive') => void;
}

export default function BulkActionsToolbar({
  selectedCount,
  onBulkAction
}: BulkActionsToolbarProps) {
  return (
    <div className="bg-white border-b border-gray-100 px-4 py-2">
      <div className="flex items-center gap-2 mb-2">
        <span className="text-sm text-gray-600">
          {selectedCount} selected
        </span>
      </div>
      <div className="flex items-center gap-1.5">
        <Button
          variant="ghost"
          size="sm"
          className="text-gray-600 hover:text-gray-900 h-8 px-2"
          onClick={() => onBulkAction('mark-read')}
        >
          <EyeOff className="h-4 w-4 mr-1" />
          <span className="text-sm">Mark as read</span>
        </Button>
        <Button
          variant="ghost"
          size="sm"
          className="text-gray-600 hover:text-gray-900 h-8 px-2"
          onClick={() => onBulkAction('archive')}
        >
          <Archive className="h-4 w-4 mr-1" />
          <span className="text-sm">Archive</span>
        </Button>
        <Button
          variant="ghost"
          size="sm"
          className="text-red-600 hover:text-red-700 h-8 px-2"
          onClick={() => onBulkAction('delete')}
        >
          <Trash2 className="h-4 w-4 mr-1" />
          <span className="text-sm">Delete</span>
        </Button>
      </div>
    </div>
  );
}