"use client";
import { motion } from "motion/react";
import Style, { Col, Row } from "./ListItem.styled";
import { useMemo } from "react";
export default function ListItem(props) {
    const ListRow = (data) => {
        return (data &&
            (typeof data !== "string" && data?.length > 0 ? (data?.map((v, k) => (<Row key={k} title={v?.title} $gap={typeof v?.gap === "undefined" ? 1 : v?.gap} $change={v?.change} $fit={v?.fit} data-row={v?.align} style={v?.style} onClick={v?.onClick}>
                        {ListCol(v?.children || v)}
                    </Row>))) : typeof data === "string" ? (<span>{data}</span>) : (data)));
    };
    const ListCol = (data) => {
        return (data &&
            (typeof data !== "string" && data?.length > 0 ? (data?.map((v, k) => (<Col key={k} title={v?.title} $gap={typeof v?.gap === "undefined" ? 1 : v?.gap} $change={v?.change} $fit={v?.fit} data-col={v?.align} style={v?.style} onClick={v?.onClick}>
                        {ListRow(v?.children || v)}
                    </Col>))) : typeof data === "string" ? (<span>{data}</span>) : (data)));
    };
    const handleClick = (e) => {
        if (typeof props?.onClick === "function")
            props?.onClick(props, e);
    };
    const m = useMemo(() => (typeof props?.motion === "object" ? props?.motion : !!props?.motion ? {} : undefined), [props?.motion]);
    return (<Style {...m} as={m ? motion.div : undefined} layoutId={m && `${m?.layoutId || crypto.randomUUID()}`} initial={m?.initial || (m && { scale: 0.9, opacity: 0 })} animate={m?.animate || (m && { scale: 1, opacity: 1 })} exit={m?.exit || (m && { scale: 0.9, opacity: 0 })} transition={m?.transition ||
            (!!motion && {
                ease: "easeInOut",
                duration: 0.15,
            })} layout={m?.layout || (m && "position")} $change={props?.change} $gap={typeof props?.gap === "undefined" ? 1 : props?.gap} $event={typeof props?.onClick === "function" ? true : false} style={props?.style} onClick={(e) => handleClick(e)}>
            {ListCol(props?.children)}
        </Style>);
}
//# sourceMappingURL=ListItem.jsx.map