import { component$, CSSProperties, QwikIntrinsicElements, Slot } from "@builder.io/qwik";

type GradientProps = {
    size: string;
    from: string;
    to: string;
    direction?: string;
};

export default component$((props: GradientProps & QwikIntrinsicElements["div"]) => {
    const {
        size,
        from,
        to,
        direction,
        style: userStyle,
        ...rest
    } = props;

    const borderStyle: CSSProperties = {
        padding: size,
        background: `linear-gradient(${direction || "to bottom"}, ${from}, ${to})`,
        display: "inline-block",
    };

    // Only spread userStyle if it's an object
    const mergedStyle =
        userStyle && typeof userStyle === "object"
            ? { ...borderStyle, ...userStyle }
            : borderStyle;

    return (
        <div
            style={mergedStyle}
            {...rest}
        >
            <Slot />
        </div>
    );
});