Dotbase-site/components/dashboard/main/Workspace.tsx

'use client';

import React from 'react';
import { DotbaseNodesEnum, DOTBASE_NODES } from '@/components/dashboard/nodes/types/nodeTypes';
import { v4 as uuidv4 } from 'uuid';
import '@/styles/styles.css'; 

const Workspace = () => {
  const onDragStart = (event: React.DragEvent, nodeType: DotbaseNodesEnum) => {
    const newNode = {
      ...DOTBASE_NODES[nodeType],
      id: `${nodeType}__${uuidv4()}`
    };
    event.dataTransfer.setData('application/reactflow', JSON.stringify(newNode));
    event.dataTransfer.effectAllowed = 'move';
  };

  const agents = [
    {
      name: "HUB",
      description: "Enables agent collaboration",
      nodeType: DotbaseNodesEnum.HUB
    },
    {
      name: "BRIDGE",
      description: "Mediates between agents and users",
      nodeType: DotbaseNodesEnum.BRIDGE
    },
    {
      name: "NEXUS",
      description: "System message-configured agent",
      nodeType: DotbaseNodesEnum.NEXUS
    },
    {
      name: "LUMINA",
      description: "OpenAI Assistant API integration",
      nodeType: DotbaseNodesEnum.LUMINA
    }
  ];

  const tools = [
    {
      name: "SPARK",
      description: "Custom function support for agents",
      nodeType: DotbaseNodesEnum.SPARK
    }
  ];

  return (
    <div className="absolute bottom-10 left-0 right-0 z-10 flex justify-center">
      <div className="w-[69%] bg-slate-500/10 backdrop-blur-sm rounded-xl p-6">
        <div className="flex justify-evenly">
          {/* Agents Section */}
          <div className="w-[77%] mr-6">
            <h2 className="text-white text-sm font-medium mb-4 font-offbit">AGENTS</h2>
            <div className="flex gap-3 overflow-x-auto custom-scrollbar"> 
              {agents.map((agent, index) => (
                <div
                  key={index}
                  draggable
                  onDragStart={(e) => onDragStart(e, agent.nodeType)}
                  className="w-[185px] flex-shrink-0 bg-[#1c1c1c] p-3 rounded-lg cursor-move 
                    hover:bg-[#252525] transition-colors border border-[#333333] hover:border-[#444444]"
                >
                  <h3 className="text-white text-sm font-medium mb-1 font-offbit">{agent.name}</h3>
                  <p className="text-gray-400 text-xs leading-relaxed">{agent.description}</p>
                </div>
              ))}
            </div>
          </div>
          <div className="w-[2px] bg-slate-500/20 bottom-4" />


          {/* Tools Section */}
          <div className="w-[22%] ml-6">
            <h2 className="text-white text-sm font-medium mb-4 font-offbit">TOOLS</h2>
            <div className="flex flex-col ">
              {tools.map((tool, index) => (
                <div
                  key={index}
                  draggable
                  onDragStart={(e) => onDragStart(e, tool.nodeType)}
                  className="w-[185px] bg-[#1c1c1c] rounded-lg p-3 cursor-move 
                    hover:bg-[#252525] transition-colors border border-[#333333] hover:border-[#444444] min-h-[85px]"
                >
                  <h3 className="text-white text-sm font-medium mb-1 font-offbit">{tool.name}</h3>
                  <p className="text-gray-400 text-xs leading-relaxed">{tool.description}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Workspace;