// Axios를 활용하여 데이터 가져오기
let getAPI = async () => {
    const options = {
      method: "GET",
      url: `${process.env.REACT_APP_VIDEO_URL}`,
      headers: {
        "X-RapidAPI-Key": `${process.env.REACT_APP_KEY}`,
        "X-RapidAPI-Host": `${process.env.REACT_APP_VIDEO_HOST}`,
      },
    };

    setLoading(true);

    try {
      const response = await axios.request(options);
      setVideo(response.data);
      setLoading(false);
    } catch (error) {
      if (error instanceof AxiosError) {
        let errorStatus = error.response?.data.details;
        setError(errorStatus);
        setLoading(false);
      }
    }
  };

// 검색 기능 - Scroll 하지 않고, 원하는 팀 검색
const filteredList = video.filter((item) => {
    return item.title.toUpperCase().includes(userInput.toUpperCase());
  });

// Thumbnail이 에러일 시 Default Thumnail 보여주기
const thumbnailHandler = (e: SyntheticEvent<HTMLImageElement, Event>) => {
    e.currentTarget.src = `${process.env.PUBLIC_URL}/assets/images/thumbnail-default.jpg`;
};

return error === null ? (
    // 로딩 중일 시 메시지 보여주기
    loading ? (
      <LoadingMessage contents="하이라이트 영상" size="large" />
    ) : (
      <VideoItemWrapper>
	// 영상 리스트
        {filteredList.map((list) => (
          <section key={list.url}>
            <MatchTeams>{list.title}</MatchTeams>
            <a href={list.url} target="_blank" rel="noreferrer">
              <Img
                src={list.thumbnail}
                alt="Football match thumbnail"
                onError={thumbnailHandler}
              />
            </a>
            <MatchDate>{dateHandler(list.date)}</MatchDate>
          </section>
        ))}
      </VideoItemWrapper>
    )
  ) : (
    // 에러가 있을 시 메시지 보여주기
    <ErrorMessage category="VIDEO" error={error} />
  );
};