import type { ComponentPropsWithoutRef } from "react";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
import { Typography } from "@mui/material";

import { cn } from "@/lib/utils";

export type FormErrorMessageProps = ComponentPropsWithoutRef<"div"> & {
  message: string;
};

export function FormErrorMessage({ message, className, ...props }: FormErrorMessageProps) {
  return (
    <div className={cn("mt-0.5 flex items-center gap-1.5", className)} {...props}>
      <ErrorOutlineIcon fontSize="small" color="error" />
      <Typography
        variant="caption"
        color="error"
        sx={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)" }}
      >
        {message}
      </Typography>
    </div>
  );
}