import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
import { InfoIcon, X } from "lucide-react";
import { Button } from "./ui/button";

type CustomAlertProps = {
    alertType: "default" | "destructive";
    serverError: string | null;
    setServerError: (error: string | null) => void;
};

const CustomAlert = ({
    alertType,
    serverError,
    setServerError,
}: CustomAlertProps) => {
    return (
        <Alert
            variant={alertType}
            className="col-span-2 max-w-md border-amber-200 bg-amber-50 text-amber-900"
        >
            <InfoIcon />
            <AlertTitle className="flex items-center justify-between gap-2">
                <AlertTitle>Failed to add Item</AlertTitle>
                <Button
                    type="button"
                    variant="ghost"
                    onClick={() => setServerError(null)}
                >
                    <X className="cursor-pointer" />
                </Button>
            </AlertTitle>
            <AlertDescription>{serverError}</AlertDescription>
        </Alert>
    );
};

export default CustomAlert;