ldc-ovoteam/resources/ts/back/Components/InputError.tsx

import { usePage } from "@inertiajs/react";
import { AlertCircleIcon } from "lucide-react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import trans from "@/hooks/use-translations";
import { cn } from "@/lib/utils";

export default function InputError({
  all,
  message,
}: Readonly<{
  all?: boolean;
  message?: string;
}>) {
  const { errors } = usePage().props;
  const errorsTrans = trans("uwil-backend::back.errors");
  let messages = {} as string[];
  if (message) {
    messages = Object.values([message]);
  } else if (Object.values(errors).length && all) {
    messages = Object.values(errors);
  }
  if (messages.length) {
    return (
      <Alert
        variant="destructive"
        className={cn("text-left col-span-2", { "mb-4": all })}
      >
        <AlertCircleIcon className="h-4 w-4" />
        {all && <AlertTitle>{errorsTrans}</AlertTitle>}
        <AlertDescription>
          {messages.map((errorMessage) => {
            return <p key={errorMessage}>{errorMessage}</p>;
          })}
        </AlertDescription>
      </Alert>
    );
  }
}