import type { CreateRecipeFormEntries } from "../../pages/Create";

interface ValidationErrorListProps {
  validation: CreateRecipeFormEntries;
}

const MESSAGES: Record<keyof CreateRecipeFormEntries, string> = {
  title: "Invalid title provided.",
  description: "Invalid description provided.",
  prepTime: "Invalid preparation time provided.",
  cookTime: "Invalid cook time provided.",
  servingSize: "Invalid serving size provided.",
  category: "Invalid category selected.",
  difficulty: "Invalid difficulty selected.",
  ingredients: "Invalid ingredients provided.",
  instructions: "Invalid instructions provided.",
}

export default function ValidationErrorList({ validation }: ValidationErrorListProps) {
  return (
    <div className="my-2">
      {Object.entries(validation)
        .filter(([, isValid]) => !isValid)
        .map(([name]) => {
          const key = name as keyof CreateRecipeFormEntries;
          return (
            <p key={name} className="text-sm text-red-500">
              {MESSAGES[key]}
            </p>
          );
        })}
      {validation.ingredients.filter(x => !x.valid).length > 0 && (
        <p className="text-sm text-red-500">
          {MESSAGES.ingredients}
        </p>
      )}
      {validation.instructions.filter(x => !x.valid).length > 0 && (
        <p className="text-sm text-red-500">
          {MESSAGES.instructions}
        </p>
      )}
    </div>
  );
}