import type { Node } from '@antv/x6';
import { STATUS_COLORS } from '../../../constants/statusColors.ts';
import type { EntityStatus } from '../../../types/index.ts';

interface CardNodeData {
  slotName: string;
  networkName: string;
  status: EntityStatus;
}

export function CardNode({ node }: { node: Node }) {
  const data = node.getData() as CardNodeData;
  const colors = STATUS_COLORS[data.status];
  const size = node.getSize();

  return (
    <div
      style={{
        width: size.width,
        height: size.height,
        borderTop: `1.5px solid ${colors.border}`,
        borderBottom: `1.5px solid ${colors.border}`,
        borderLeft: `5px solid ${colors.border}`,
        borderRight: `5px solid ${colors.border}`,
        borderRadius: 0,
        background: colors.fill,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        boxSizing: 'border-box',
        fontSize: 9,
        fontWeight: 600,
        color: colors.text,
        textAlign: 'center',
        wordBreak: 'break-word',
        lineHeight: '12px',
        padding: '2px 4px',
      }}
    >
      {data.slotName}:{data.networkName}
    </div>
  );
}