import { View } from "@tarojs/components";
import ListCard from "@/components/ListCard";
import ListLoadError from "@/components/ListLoadError";
import ListCardSkeleton from "@/components/ListCardSkeleton";
// import { useGlobalState } from "@/store/global";

const ListContainer = (props) => {
  const { loading, data = [], error, reload } = props;
  // const { statusNavbarHeightInfo } = useGlobalState() || {};
  // const { totalHeight } = statusNavbarHeightInfo;

  const renderList = () => {
    if (loading && data.length > 0) {
      return (
        <>
          {new Array(10).fill(0).map(() => {
            return <ListCardSkeleton />;
          })}
        </>
      );
    }

    if (error) {
      return <ListLoadError reload={reload} />;
    }

    if (loading && data.length === 0) {
      return null;
    }

    return (
      <>
        {data.map((match, index) => (
          <ListCard key={match.id || index} {...match} />
        ))}
      </>
    );
  };

  return (
    <View
      className="listContentWrapper"
      // style={{
      //   minHeight: `calc(100vh - ${totalHeight}px)`,
      // }}
    >
      {renderList()}
    </View>
  );
};

export default ListContainer;