import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { BookOpen, Brain, Gauge, ListChecks, Merge, Plus } from "lucide-react";

interface DecisionFusionHeaderProps {
  onCreate: () => void;
}

export function DecisionFusionHeader({ onCreate }: DecisionFusionHeaderProps) {
  return (
    <Card className="p-6 bg-gradient-to-r from-accent/10 via-primary/10 to-accent/5 border border-accent/30">
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-start gap-3 flex-1">
          <Merge className="w-6 h-6 text-primary flex-shrink-0 mt-1" />
          <div className="flex-1">
            <h2 className="mb-2 text-xl font-semibold">业务融合</h2>
            <p className="text-sm text-muted-foreground mb-3">
              将AI模型输出、业务规则和上下文信息进行智能融合，生成可执行的决策建议。
            </p>
            <div className="flex flex-wrap gap-2">
              <Badge variant="outline" className="bg-white text-primary border-primary/40">
                <Brain className="w-3 h-3 mr-1" />
                模型融合
              </Badge>
              <Badge variant="outline" className="bg-white text-primary border-primary/40">
                <ListChecks className="w-3 h-3 mr-1" />
                规则匹配
              </Badge>
              <Badge variant="outline" className="bg-white text-primary border-primary/40">
                <BookOpen className="w-3 h-3 mr-1" />
                上下文分析
              </Badge>
              <Badge variant="outline" className="bg-white text-primary border-primary/40">
                <Gauge className="w-3 h-3 mr-1" />
                置信度评估
              </Badge>
            </div>
          </div>
        </div>
        <Button onClick={onCreate} className="bg-success hover:bg-success/90">
          <Plus className="w-4 h-4 mr-2" />
          新建决策
        </Button>
      </div>
    </Card>
  );
}
