// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)
/**
 * ValidationSummary — amber banner enumerating form validation errors.
 *
 * @layer Presentation
 */

import { AlertCircle } from 'lucide-react';
import type { TFunction } from '../lib/constants';
import { renderError, type ValidationError } from '../lib/validate';

interface ValidationSummaryProps {
  errors: ValidationError[];
  t: TFunction;
}

export function ValidationSummary({ errors, t }: ValidationSummaryProps) {
  return (
    <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 flex gap-3">
      <AlertCircle className="text-amber-600 shrink-0 mt-0.5" size={18} />
      <div className="text-sm">
        <p className="font-medium text-amber-900 mb-1">
          {t('tenants.pluginSettings.validationTitle')}
        </p>
        <ul className="list-disc list-inside text-amber-800 space-y-0.5">
          {errors.map((err, i) => (
            <li key={`${err.code}-${i}`}>{renderError(t, err)}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}