'use client';

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
import { postgrestUrl } from '@/app/lib/constants'
import Link from 'next/link'
import { useSession } from "next-auth/react";
import { signIn } from "next-auth/react"


export default function Page() {
    const { data: session } = useSession();
    return (
        <div className="content">
            <div className="section">
                <h1 className="title">Futureporn API</h1>
                <p className="subtitle">Futureporn Application Programmable Interface (API) for developers and power users</p>
            </div>
            <div>
                <div className="section">
                    <div className="box">
                        <h2 className="title">RSS Feed</h2>
                        <p className="subtitle">Keep up to date with new VODs using Real Simple Syndication (RSS).</p>

                        <p>Don&apos;t have a RSS reader? Futureporn recommends <Link target="_blank" href="https://fraidyc.at/">Fraidycat <FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></Link></p>

                        <div className='field is-grouped'>
                            <p className='control'><a className="my-5 button is-primary" href="/feed/feed.xml">ATOM</a></p>
                            <p className="control"><a className="my-5 button" href="/feed/rss.xml">RSS</a></p>
                            <p className='control'><a className="my-5 button" href="/feed/feed.json">JSON</a></p>
                        </div>
                    </div>
                </div>

                <div className="section">
                    <div className="box">
                        <h2 className="title mb-2">Data API</h2>
                        <p>The Data API contains all the data served by this website in JSON format. This API is unstable, meaning it's subject to changes that may break your integrations.</p>
                        <div><Link className="mt-3 mb-5 button is-primary" href="/api/v1.json">Futureporn API Version 1</Link></div>
                        <div><Link className="mt-3 mb-5 button is-primary" href={postgrestUrl}>Futureporn API Version 2</Link></div>
                    </div>
                </div>

                <div className="section">
                    <div className="box">
                        <h1>Client Session (test)</h1>
                        <pre>{JSON.stringify(session)}</pre>

                        

                        <button onClick={() => signIn()}>Sign in</button>
                    </div>
                </div>

            </div>
        </div>
    )
}