"use client";

import { CheckCircleIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import type { ValidationStatusProps } from "./types";

export function ValidationStatus({ errors, warnings, showSuccess }: ValidationStatusProps) {
  const hasErrors = errors && errors.length > 0;
  const hasWarnings = warnings && warnings.length > 0;

  if (hasErrors) {
    return (
      <div className="flex items-start gap-2 text-red-600">
        <ExclamationTriangleIcon className="h-4 w-4 flex-shrink-0 mt-0.5" />
        <div className="text-sm">
          {errors.map((error, index) => (
            <div key={index}>{error}</div>
          ))}
        </div>
      </div>
    );
  }

  if (hasWarnings) {
    return (
      <div className="flex items-start gap-2 text-amber-600">
        <ExclamationTriangleIcon className="h-4 w-4 flex-shrink-0 mt-0.5" />
        <div className="text-sm">
          {warnings.map((warning, index) => (
            <div key={index}>{warning}</div>
          ))}
        </div>
      </div>
    );
  }

  if (showSuccess) {
    return (
      <div className="flex items-center gap-2 text-green-600">
        <CheckCircleIcon className="h-4 w-4" />
        <span className="text-sm font-medium">Configuration complete</span>
      </div>
    );
  }

  return null;
}
