import { IpInfo } from '@shared/types'
import { useLanguage } from '../contexts/LanguageContext'
import './IpInfoCard.css'

interface IpInfoCardProps {
  info: IpInfo
  className?: string
  compact?: boolean
}

export default function IpInfoCard({ info, className = '', compact = false }: IpInfoCardProps) {
  const { t } = useLanguage()

  const asnDisplay = info.asn ? `AS${info.asn}` : '-'

  if (compact) {
    return (
      <div className={`ip-info-card compact ${className}`}>
        <div className="ip-compact-row">
          <span className="ip-label">IP</span>
          <span className="ip-value">{info.ip}</span>
          <span className="ip-location">{info.city && `${info.city}, `}{info.country || '-'}</span>
        </div>
        <div className="ip-compact-row">
          <span className="ip-org">{info.org || info.isp || '-'}</span>
          <span className="ip-asn">{asnDisplay}</span>
        </div>
      </div>
    )
  }

  return (
    <div className={`ip-info-card ${className}`}>
      <div className="ip-main-info">
        <div className="ip-address-row">
          <span className="ip-label">IP</span>
          <span className="ip-value">{info.ip}</span>
        </div>
        <div className="ip-location-row">
          <span className="location-text">
            {info.city && `${info.city}, `}{info.country || '-'}
          </span>
        </div>
      </div>

      <div className="ip-details-grid">
        <div className="ip-detail-item">
          <span className="detail-label">ISP</span>
          <span className="detail-value">{info.isp || '-'}</span>
        </div>
        <div className="ip-detail-item">
          <span className="detail-label">ASN</span>
          <span className="detail-value">{asnDisplay}</span>
        </div>
        <div className="ip-detail-item full-width">
          <span className="detail-label">{t('组织', 'Organization')}</span>
          <span className="detail-value">{info.org || '-'}</span>
        </div>
      </div>
    </div>
  )
}