import { useEffect, useState } from 'react'

const API_BASE_URL = 'https://api.pornhub.com/v1/search';

function App() {
 const [query, setQuery] = useState('')
 const [posts, setPosts] = useState([])

 const [data, setData] = useState(null)
 const [loading, setLoading] = useState(false)

 useEffect(() => {
    fetchPosts()
 }, [query])

 async function fetchPosts() {
    setLoading(true)
    try {
      const response = await fetch(`${API_BASE_URL}/?search=${query}`)
      const data = await response.json()
      setData(data)
      setPosts(data.posts)
    } catch (error) {
      console.error(error)
    } finally {
      setLoading(false)
    }
 }

 return (
    <div class="container mx-auto">
      {loading ? (
        <div class="h-full w-full flex justify-center items-center">
          <div class="loading"> loading...</div>
        </div>
      ) : (
        <>
          <h1>Amateur Incest Porn</h1>
          <textarea class="single-line text-normal" x-model="query" />
          <button class="btn" x-on:click="search()">Search</button>
          <div class="grid grid-cols-1 lg:grid-cols-2">
            {posts.map((post) => (
              <img
                class="ml-auto h-200 mb-2"
                :src="post.image_url"
                :alt="post.title"
              />
            ))}
          </div>
        </>
      )}
    </div>
 )
}

export default App