import { CheckCircle } from 'lucide-react'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'

interface Props {
  fileName: string
  detected?: string
  importedCount: number
  skippedCount: number
  onReset: () => void
}

export function UploadPreview({ fileName, detected, importedCount, skippedCount, onReset }: Props) {
  return (
    <div className="space-y-4">
      <Alert>
        <CheckCircle className="h-4 w-4" />
        <AlertTitle>Import complete — {fileName}</AlertTitle>
        <AlertDescription className="mt-1 space-y-1">
          {detected && <p>Detected: <span className="font-medium">{detected}</span></p>}
          <p>{importedCount} transaction{importedCount !== 1 ? 's' : ''} imported</p>
          {skippedCount > 0 && (
            <p className="text-muted-foreground">{skippedCount} duplicate{skippedCount !== 1 ? 's' : ''} skipped</p>
          )}
        </AlertDescription>
      </Alert>
      <Button variant="outline" onClick={onReset}>Upload another file</Button>
    </div>
  )
}