import { View, Text } from "@tarojs/components";
import ListCard from "@/components/ListCard";
import ListLoadError from "@/components/ListLoadError";
import ListCardSkeleton from "@/components/ListCardSkeleton";
import "./index.scss";

const ListContainer = (props) => {
  const { loading, data = [], error, reload, recommendList } = props;

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

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

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

  return (
    <View className="listContentWrapper">
      {renderList(data)}
      <View className="recommendTextWrapper">
        <Text className="recommendText">搜索结果较少，已为你推荐其他内容</Text>
      </View>
      {renderList(recommendList)}
    </View>
  );
};

export default ListContainer;