import React from 'react'
import './connect-item.scss'

function ConnectItem({ ipAddress, isConnected=false, isPreviewing=false, onRemove }) {
  return (
    <div className="connect-item-container">
      <div className="ip-address">{ipAddress}</div>
      <div className="connect-btn">
        {isConnected ? '断开' : '连接'}
      </div>
      <div className="preview-btn">
        {isPreviewing ? '停止预览' : '预览'}
      </div>
      <div className="remove-btn" onClick={() => onRemove && onRemove(ipAddress)}>
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" fill="none"/>
          <path d="M8 12H16" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
        </svg>
      </div>
    </div>
  )
}

export default ConnectItem
