import { ValidationErrors } from "@/types"
import { Alert } from "react-bootstrap";

interface Props {
    title?: string;
    validationErrors: ValidationErrors;
}

export default function AlertError({ title = "Form Validation", validationErrors }: Props) {
    return (
        <Alert variant="danger" className="mt-4 mb-0">
            <Alert.Heading>{title}</Alert.Heading>
            <ul className="small">
                {Object.keys(validationErrors).map((key, idx) => (
                    <li key={idx}>
                        <span>{validationErrors[key]}</span>
                    </li>
                ))}
            </ul>
        </Alert>
    )
}