Function ProcessingBlock

components/ProcessingBlock.tsx:22–120

({ isProcessing, stats = {
  subdomainsParsed: 0,
  pagesCrawled: 0,
  dataExtracted: '0 KB',
  errorsEncountered: 0
} }: ProcessingBlockProps)

}

export default function ProcessingBlock({ isProcessing, stats = {
  subdomainsParsed: 0,
  pagesCrawled: 0,
  dataExtracted: '0 KB',
  errorsEncountered: 0
} }: ProcessingBlockProps) {
  const progress = Math.min(
    ((stats.subdomainsParsed + stats.pagesCrawled) /
    (stats.subdomainsParsed > 0 ? stats.subdomainsParsed * 2 : 2)) * 100,
    100
  )

  const statItems = [
    {
      icon: Globe,
      label: "Subdomains Parsed",
      value: stats.subdomainsParsed,
      color: "text-blue-400"
    },
    {
      icon: FileText,
      label: "Pages Crawled",
      value: stats.pagesCrawled,
      color: "text-purple-400"
    },
    {
      icon: Database,
      label: "Data Extracted",
      value: stats.dataExtracted,
      color: "text-green-400"
    },
    {
      icon: AlertTriangle,
      label: "Errors Encountered",
      value: stats.errorsEncountered,
      color: "text-yellow-400"
    }
  ]

  return (
    <div className="w-full">
      <div className={`
        flex items-center gap-3 p-3 mb-4 rounded-lg
        transition-all duration-300
        ${isProcessing
          ? 'bg-blue-500/10 text-blue-400'
          : 'bg-gray-800/50 text-gray-400'
        }
      `}>
        <div className="flex items-center gap-2">
          <Loader2 className={`
            h-5 w-5 transition-opacity duration-300
            ${isProcessing ? 'animate-spin opacity-100' : 'opacity-0'}
          `} />
          <span className="font-medium">
            {isProcessing ? 'Processing URL...' : 'Waiting for URL...'}
          </span>
        </div>