"use client";
import { AnimatePresence, motion } from "motion/react";
import { Elements } from "../../../components";
import Style, { NoData } from "./List.styled";
import ListItem from "./ListItem";
export default function List(props) {
    const fallback = props?.fallback || "There is no data.";
    const fill = props?.fill || false;
    const list = typeof props?.formatter === "function" ? props?.formatter(props?.list) : props?.list;
    return (<>
            {props?.list && typeof props?.list !== "string" && props?.list?.length > 0 ? (<Style $fill={fill} style={props?.style}>
                    <AnimatePresence mode="popLayout">
                        <>
                            {list?.map((data, i) => (<ListItem key={data?.index || i} as={data?.motion && motion.div} {...(data?.children && data)} motion={data?.motion && {
                    ...(typeof data?.motion === "object" && data?.motion),
                    layoutId: `${i}`,
                }}>
                                    {data?.children ? data?.children : data}
                                </ListItem>))}
                        </>
                    </AnimatePresence>
                </Style>) : (<NoData key="fallback" as={motion.div} initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.9, opacity: 0 }} transition={{ ease: "easeInOut", duration: 0.3 }} layout>
                    {typeof fallback === "string" ? (<Elements.Text type={"desc"} opacity={0.6}>
                            {fallback}
                        </Elements.Text>) : (<>{fallback}</>)}
                </NoData>)}
        </>);
}
//# sourceMappingURL=List.jsx.map