'use client';

import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { FileText } from 'lucide-react';
import { useChartComparison } from './chartComparisonReducer';

interface ReportGeneratorProps {
  onGenerateReport: () => void;
  reportGenerating: boolean;
  reportProgress: number;
}

export function ReportGenerator({ onGenerateReport, reportGenerating, reportProgress }: ReportGeneratorProps) {
  return (
    <div className="flex-shrink-0">
      <label className="text-xs text-muted-foreground mb-2 block opacity-0">操作</label>
      <Button
        className="bg-green-600 hover:bg-green-700"
        onClick={onGenerateReport}
        disabled={reportGenerating}
      >
        <FileText className="w-4 h-4 mr-2" />
        生成报告
      </Button>

      {reportGenerating && (
        <div className="mt-4 pt-4 border-t">
          <div className="flex items-center justify-between text-sm mb-2">
            <span className="text-muted-foreground">生成进度</span>
            <span className="font-medium">{reportProgress}%</span>
          </div>
          <Progress value={reportProgress} className="h-2" />
          <p className="text-xs text-muted-foreground text-center mt-2">
            正在生成报告，请稍候...
          </p>
        </div>
      )}
    </div>
  );
}