'use client';

import { Alert, AlertDescription } from '@/components/ui/alert';

export interface ValidationAlertProps {
  errors: Record<string, string>;
}

/**
 * 밸리데이션 에러 Alert - 기존 ValidationAlert와 동일한 디자인
 */
export function ValidationAlert({ errors }: ValidationAlertProps) {
  const errorCount = Object.keys(errors).length;

  if (errorCount === 0) {
    return null;
  }

  return (
    <Alert className="bg-red-50 border-red-200">
      <AlertDescription className="text-red-900">
        <div className="flex items-start gap-2">
          <span className="text-lg">⚠️</span>
          <div className="flex-1">
            <strong className="block mb-2">
              입력 내용을 확인해주세요 ({errorCount}개 오류)
            </strong>
            <ul className="space-y-1 text-sm">
              {Object.entries(errors).map(([fieldKey, errorMessage]) => (
                <li key={fieldKey} className="flex items-start gap-1">
                  <span>•</span>
                  <span>{errorMessage}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </AlertDescription>
    </Alert>
  );
}
