import React, { useMemo } from "react";
import { Box } from "@chakra-ui/react";

export type FlexboxItemAttributes = {
    width: string;
    flex: string;
    height: string;
    padding: string;
    margin: string;
    background: string;
    alignSelf: string;
    order: string;
};

export type BaseFlexboxItemProps = {
    node: {
        attrs: FlexboxItemAttributes;
    };
    children: React.ReactNode;
    className?: string;
};

export function BaseFlexboxItemComponent({ node, children, className = "" }: BaseFlexboxItemProps) {
    // Apply styles based on attributes
    const itemStyle = useMemo(() => ({
        minWidth: "0", // Prevents overflow issues
        backgroundColor: node.attrs.background,
        width: node.attrs.width,
        height: node.attrs.height,
        padding: node.attrs.padding,
        margin: node.attrs.margin,
        alignSelf: node.attrs.alignSelf,
        order: node.attrs.order,
        flex: node.attrs.flex, // Use the flex property from the attributes
    }), [
        node.attrs.width,
        node.attrs.flex,
        node.attrs.height,
        node.attrs.padding,
        node.attrs.margin,
        node.attrs.background,
        node.attrs.alignSelf,
        node.attrs.order
    ]);

    return (
        <Box
            className={`flexbox-item ${className}`}
            {...itemStyle}
        >
            {children}
        </Box>
    );
}

export default BaseFlexboxItemComponent;