/**
 * ValidationAlert - 폼 검증 에러 표시 컴포넌트
 */

import { Alert, AlertDescription } from '@/components/ui/alert';
import { FIELD_NAME_MAP } from './constants';
import type { FieldErrors } from 'react-hook-form';
import type { CreateItemFormData } from '@/lib/utils/validation';

interface ValidationAlertProps {
  errors: FieldErrors<CreateItemFormData>;
}

export default 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(([field, error]) => {
                const fieldName = FIELD_NAME_MAP[field] || field;
                const errorMessage = error?.message || '입력 오류';

                return (
                  <li key={field} className="flex items-start gap-1">
                    <span>•</span>
                    <span>
                      <strong>{fieldName}</strong>: {errorMessage}
                    </span>
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      </AlertDescription>
    </Alert>
  );
}