import { Card, CardContent } from '@shared/components/ui/card';
import { RealTransshipSuspects } from '@features/detection/RealVesselAnalysis';

export function TransferDetection() {
  return (
    <div className="space-y-5">
      <div>
        <h2 className="text-xl font-bold text-heading">환적·접촉 탐지</h2>
        <p className="text-xs text-hint mt-0.5">선박 간 근접 접촉 및 환적 의심 행위 분석</p>
      </div>

      {/* prediction 분석 결과 기반 실시간 환적 의심 선박 */}
      <RealTransshipSuspects />

      {/* 탐지 조건 */}
      <Card className="bg-surface-overlay border-slate-700/40">
        <CardContent className="p-5">
          <div className="text-xs text-muted-foreground mb-3">탐지 조건</div>
          <div className="grid grid-cols-3 gap-4">
            <div className="bg-surface-raised rounded-lg p-4">
              <div className="text-[11px] text-hint mb-1">거리</div>
              <div className="text-xl font-bold text-heading">≤ 100m</div>
            </div>
            <div className="bg-surface-raised rounded-lg p-4">
              <div className="text-[11px] text-hint mb-1">시간</div>
              <div className="text-xl font-bold text-heading">≥ 30분</div>
            </div>
            <div className="bg-surface-raised rounded-lg p-4">
              <div className="text-[11px] text-hint mb-1">속도</div>
              <div className="text-xl font-bold text-heading">≤ 3kn</div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}