import ErrorPage from "next/error";
import { getStrapiURL, getTV, getTVGQL } from "utils/api";
import { useRouter } from "next/router";
import axios from 'axios';
import Link from "next/link";
import Image from 'next/image';

import TVChannels from "@/components/tv/TVChannels";
import ChannelsFM from "components/tv/channelsFM";

const TV = ({TVDescription, TVLogo, error}) => {
    if (error) {
      return <div className="container">{error}</div>;
    }
    return (
       <div className="w-full h-screen mt-6 justify-center ">
        
          <div className="w-full text-center">
            <h1>     
            <Image
            src={TVLogo}
            alt="Hookito.tv"
            width={296}
            height={55}
            />
            </h1>
          </div>
          
          <div className="mx-4 text-center ">
            {TVDescription}
          </div>

           {/*Load TV Channels*/}
          <TVChannels />

        </div>
    );
  };

export async function getStaticProps(contex)  {
    try {
      const res = await axios.get('http://localhost:1337/tv');
      const TVResponse = await res.data;

      const TVDescription = TVResponse.Description;
      const TVLogo = "http://localhost:1337" + TVResponse.HookitoTVLogo.url;

      return { props: { TVDescription, TVLogo } };

    } catch (error) {
      console.log(error);
      error = 'Maintenance Mode, please check back later'
      return { props: {error: error} };
    }
};

export default TV;