'use client'

import React from 'react'
import type { TransferInfo } from '../../_types'

interface TransferLineProps {
  transfer: TransferInfo
  color: string
}

export function TransferLine({ transfer, color }: TransferLineProps) {
  return (
    <div className="flex flex-col items-center justify-center w-20 flex-shrink-0 py-4">
      <style>{`
        @keyframes iace-running-dots {
          0% { stroke-dashoffset: 12; }
          100% { stroke-dashoffset: 0; }
        }
        .iace-transfer-dots {
          animation: iace-running-dots 0.8s linear infinite;
        }
      `}</style>
      <svg width="80" height="32" viewBox="0 0 80 32" className="overflow-visible">
        {/* Background line */}
        <line
          x1="0"
          y1="16"
          x2="80"
          y2="16"
          stroke={color}
          strokeWidth="2"
          strokeOpacity="0.3"
        />
        {/* Animated running dots */}
        <line
          x1="0"
          y1="16"
          x2="80"
          y2="16"
          stroke={color}
          strokeWidth="2.5"
          strokeDasharray="4 8"
          className="iace-transfer-dots"
        />
        {/* Arrowhead */}
        <polygon
          points="74,11 80,16 74,21"
          fill={color}
        />
      </svg>
      {/* Label */}
      {transfer.label && (
        <span className="text-[10px] text-gray-500 dark:text-gray-400 mt-1 text-center leading-tight max-w-[80px] truncate">
          {transfer.label}
        </span>
      )}
    </div>
  )
}
