Mana-Loop/src/components/game/tabs/EquipmentControls.tsx

'use client';

import { EquipmentSlot } from '@/lib/game/data/equipment';
import type { GameStore } from '@/lib/game/types';
import { ActionButton } from '@/components/ui/action-button';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { X } from 'lucide-react';

interface EquipmentControlsProps {
  store: GameStore;
  onUnequip: (slot: EquipmentSlot) => void;
  onDelete: (instanceId: string, name: string) => void;
  selectedSlot: EquipmentSlot | null;
  isSlotBlocked: (slot: EquipmentSlot) => boolean;
  isEquipped: (instanceId: string) => boolean;
  getEquippableSlots: (typeId: string) => EquipmentSlot[];
}

export function EquipmentControls({
  store,
  onUnequip,
  onDelete,
  selectedSlot,
  isSlotBlocked,
  isEquipped,
  getEquippableSlots,
}: EquipmentControlsProps) {
  const SLOT_NAMES = {
    mainHand: 'Main Hand',
    offHand: 'Off Hand',
    head: 'Head',
    body: 'Body',
    hands: 'Hands',
    feet: 'Feet',
    accessory1: 'Accessory 1',
    accessory2: 'Accessory 2',
  } as const;

  return {
    renderUnequipButton: (slot: EquipmentSlot, instanceName: string) => (
      <ActionButton
        variant="ghost"
        size="sm"
        className="h-6 w-6 p-0 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
        onClick={(e) => {
          e.stopPropagation();
          onUnequip(slot);
        }}
        aria-label={`Unequip ${instanceName}`}
      >
        <X size={14} />
      </ActionButton>
    ),

    renderDeleteButton: (instanceId: string, name: string) => (
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <ActionButton
              variant="ghost"
              size="sm"
              className="h-8 w-8 p-0 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
              onClick={() => onDelete(instanceId, name)}
              aria-label={`Delete ${name}`}
            >
              <X size={14} />
            </ActionButton>
          </TooltipTrigger>
          <TooltipContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
            <p>Delete this item</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    ),
  };
}