import { Card, CardContent } from '@shared/components/ui/card';
import { PageContainer, PageHeader } from '@shared/components/layout';
import { RefreshCw } from 'lucide-react';
import { RealTransshipSuspects } from '@features/detection/RealVesselAnalysis';

export function TransferDetection() {
  return (
    <PageContainer>
      <PageHeader
        icon={RefreshCw}
        iconColor="text-cyan-400"
        title="환적·접촉 탐지"
        description="선박 간 근접 접촉 및 환적 의심 행위 분석"
      />

      {/* 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>
    </PageContainer>
  );
}