import React from "react";
import SkillSearch from "./SkillSearch";
import SkillSearchLoading from "./SkillSearchLoading";
import { fetchSkill } from "@/app/api/skill";
import { fetchUserAbilities } from "@/app/utils/fetchUtil";

interface SubComponents {
  Loading: typeof SkillSearchLoading;
}

const SkillSearchWrapper: React.FC & SubComponents = async () => {
  const [skill, abilities] = await Promise.all([fetchSkill(), fetchUserAbilities()])

  return <SkillSearch skill={skill} abilities={abilities}/>;
};

SkillSearchWrapper.Loading = SkillSearchLoading;

export default SkillSearchWrapper;
