dograh/ui/src/components/flow/nodes/BaseNode.tsx

import { forwardRef, HTMLAttributes } from "react";

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

export const BaseNode = forwardRef<
    HTMLDivElement,
    HTMLAttributes<HTMLDivElement> & {
        selected?: boolean;
        invalid?: boolean;
        highlighted?: boolean;
    }
>(({ className, selected, invalid, highlighted, ...props }, ref) => (
    <div
        ref={ref}
        className={cn(
            "relative rounded-md border bg-card p-5 text-card-foreground min-w-[300px] min-h-[100px]",
            className,
            selected ? "border-muted-foreground shadow-lg" : "",
            invalid ? "border-red-500 shadow-[0_0_10px_rgba(239,68,68,0.5)]" : "",
            highlighted ? "ring-2 ring-blue-400 shadow-[0_0_15px_rgba(59,130,246,0.5)]" : "",
            "hover:ring-1",
        )}
        tabIndex={0}
        {...props}
    />
));

BaseNode.displayName = "BaseNode";