import React from "react";
import { Card, Text } from "@tremor/react";
import { PlusIcon, TrashIcon } from "lucide-react";
import { Tool } from "./types";

interface ToolsCardProps {
  tools: Tool[];
  onAddTool: () => void;
  onEditTool: (index: number) => void;
  onRemoveTool: (index: number) => void;
}

const ToolsCard: React.FC<ToolsCardProps> = ({ tools, onAddTool, onEditTool, onRemoveTool }) => {
  return (
    <Card className="p-3">
      <div className="flex items-center justify-between mb-2">
        <Text className="text-sm font-medium">Tools</Text>
        <button onClick={onAddTool} className="text-xs text-blue-600 hover:text-blue-700 flex items-center">
          <PlusIcon size={14} className="mr-1" />
          Add
        </button>
      </div>
      {tools.length === 0 ? (
        <Text className="text-gray-500 text-xs">No tools added</Text>
      ) : (
        <div className="space-y-2">
          {tools.map((tool, index) => (
            <div
              key={index}
              className="flex items-center justify-between p-2 bg-gray-50 border border-gray-200 rounded"
            >
              <div className="flex-1 min-w-0">
                <div className="font-medium text-xs truncate">{tool.name}</div>
                <div className="text-xs text-gray-500 truncate">{tool.description}</div>
              </div>
              <div className="flex items-center space-x-1 ml-2">
                <button onClick={() => onEditTool(index)} className="text-xs text-blue-600 hover:text-blue-700">
                  Edit
                </button>
                <button onClick={() => onRemoveTool(index)} className="text-gray-400 hover:text-red-500">
                  <TrashIcon size={14} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </Card>
  );
};

export default ToolsCard;
