"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Trash2, GitMerge } from "lucide-react";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";

interface AccountBulkActionsProps {
  selectedCount: number;
  selectedAccountIds: string[];
  onDelete: () => void;
  onMerge?: () => void;
}

export function AccountBulkActions({
  selectedCount,
  selectedAccountIds: _selectedAccountIds,
  onDelete,
  onMerge,
}: AccountBulkActionsProps) {
  const isMobile = useIsMobile();

  if (selectedCount === 0) return null;

  const canMerge = selectedCount === 2 && onMerge;

  return (
    <Card className="bg-destructive/5 border-destructive/20 sticky top-0 z-10 mb-4">
      <CardContent className={cn("py-3", isMobile && "px-3")}>
        <div
          className={cn(
            "flex items-center gap-2 sm:gap-4 flex-wrap",
            isMobile && "flex-col sm:flex-row",
          )}
        >
          <span className={cn("font-medium", isMobile ? "text-xs" : "text-sm")}>
            {selectedCount} compte{selectedCount > 1 ? "s" : ""} sélectionné
            {selectedCount > 1 ? "s" : ""}
          </span>
          {canMerge && (
            <Button
              size={isMobile ? "sm" : "sm"}
              variant="default"
              onClick={onMerge}
              className={cn(isMobile && "w-full sm:w-auto")}
            >
              <GitMerge
                className={cn(isMobile ? "w-3.5 h-3.5" : "w-4 h-4", "mr-1")}
              />
              Fusionner
            </Button>
          )}
          <Button
            size={isMobile ? "sm" : "sm"}
            variant="destructive"
            onClick={onDelete}
            className={cn(isMobile && "w-full sm:w-auto")}
          >
            <Trash2
              className={cn(isMobile ? "w-3.5 h-3.5" : "w-4 h-4", "mr-1")}
            />
            Supprimer
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}