import { BaseActionState } from "@/lib/types";
import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
import { CheckIcon, CircleAlertIcon, TriangleAlertIcon } from "lucide-react";

export function FormAlert({ state }: { state: BaseActionState }) {
  return (
    <div>
      {state.status && (
        <div>
          {state.status === "success" && (
            <Alert className="border-green-500 text-green-500">
              <CheckIcon color="green" />
              <AlertTitle>Success</AlertTitle>
              <AlertDescription>
                {state.message ?? "Request completed successfully."}
              </AlertDescription>
            </Alert>
          )}
          {state.status === "invalid" && (
            <Alert className="border-orange-500 text-orange-500">
              <CircleAlertIcon color="orange" />
              <AlertTitle>Invalid Request</AlertTitle>
              <AlertDescription>
                {state.message ?? "Please check input and try again."}
              </AlertDescription>
            </Alert>
          )}
          {state.status === "error" && (
            <Alert className="border-red-500 text-red-500">
              <TriangleAlertIcon color="red" />
              <AlertTitle>Server Error</AlertTitle>
              <AlertDescription>
                {state.message ?? "Something went wrong."}
              </AlertDescription>
            </Alert>
          )}
        </div>
      )}
    </div>
  );
}