import React from "react";
import styling from "@devcake/styling";
import "../init";
import PropTypes from "prop-types";

styling.setDefault("components.error.classes", "mt-1 text-red-500 text-sm");

export interface ErrorMessageProps {
  children: React.ReactNode;
  className?: string;
}

export const ErrorMessage = ({ children, className }: ErrorMessageProps) => (
  <div
    className={[
      className,
      styling.get("components.error.classes")
    ].join(" ")}
  >
    {children}
  </div>
);

ErrorMessage.propTypes = {
  children: PropTypes.element.isRequired,
  className: PropTypes.string
};