import type { ValidationIssues } from "./types";

export interface ValidationSummaryProps {
  issues: ValidationIssues;
}

export function ValidationSummary({ issues }: ValidationSummaryProps) {
  if (issues.length === 0) {
    return (
      <div className="rounded-lg border border-border/30 bg-background/40 p-2 text-xs text-muted-foreground">
        Всё хорошо — воронка валидна.
      </div>
    );
  }

  return (
    <div className="space-y-2">
      {issues.map((issue, index) => (
        <div
          key={index}
          className="rounded-lg border border-destructive/20 bg-destructive/5 p-2 text-xs text-destructive"
        >
          <div className="flex items-start gap-2">
            <span className="text-destructive/80">⚠</span>
            <div>
              <p className="font-medium">{issue.message}</p>
              {issue.screenId && <p className="mt-1 text-destructive/80">Экран: {issue.screenId}</p>}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}