import React, { useState } from 'react'
import GenerateForm from '../components/GenerateForm'
import GenerateImgForm from '../components/GenerateImgForm'

const GenerateImg = () => {
  const [imgLoading, setImgLoading] = useState(false)
  const [postLoading, setPostLoading] = useState(false)
  const [post, setPost] = useState({name: "", prompt: "", photo: "",})

  return (
    <div className='h-full overflow-y-scroll p-5 flex flex-col gap-5 items-center justify-center'>
      <p className='flex px-2 text-2xl text-[#F6F1E9] text-center'>Generate an image using AI by describing what you want to see!</p>
      <div className='max-w-[1500px] w-full h-fit flex justify-center gap-5 py-10 max-[640px]:flex-col max-[640px]:gap-5'>
        <GenerateForm post={post} setPost={setPost} postLoading={postLoading} setPostLoading={setPostLoading} imgLoading={imgLoading} setImgLoading={setImgLoading}/>
        <GenerateImgForm loading={imgLoading} src={post?.photo}/>
      </div>
    </div>
  )
}

export default GenerateImg