"use client"

import React from 'react'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Progress } from "@/components/ui/progress"
import { Loader2 } from "lucide-react"

interface ImportProgressDialogProps {
  open: boolean
  totalRows: number
  processedRows: number
}

export function ImportProgressDialog({ open, totalRows, processedRows }: ImportProgressDialogProps) {
  const percentage = totalRows > 0 ? Math.round((processedRows / totalRows) * 100) : 0

  return (
    <Dialog open={open} onOpenChange={() => {}}>
      <DialogContent className="sm:max-w-md pointer-events-none [&>button]:hidden">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Loader2 className="h-5 w-5 animate-spin" />
            데이터 Import 중...
          </DialogTitle>
          <DialogDescription>
            잠시만 기다려주세요. 데이터를 처리하고 있습니다.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-4">
          <div className="flex items-center justify-between text-sm">
            <span className="text-muted-foreground">진행 상황</span>
            <span className="font-medium">
              {processedRows} / {totalRows}건
            </span>
          </div>
          
          <Progress value={percentage} className="h-2" />
          
          <div className="text-center text-sm text-muted-foreground">
            {percentage}% 완료
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}