import NavBar from "@/components/navigation/NavBar";
import Post from "@/components/post/Post";
import { useFriends } from "@/hooks/useFriends";
import { useUser } from "@/hooks/useUser";


const userx = {
  id: "asdf",
  name: 'Tom Cook',
  email: 'tom@example.com',
  username: 'TomCook',
  profile:
    'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
}

const Feed = () => {
  const user = useUser()
  const friends = useFriends();
    return(
      <>
        <div className="w-full">
          <NavBar user={user} friends={friends} />
        </div>
        <div className="flex w-full bg-c-pink flex-col items-center py-3 pt-10">
          <div className="flex-1 max-w-4xl flex items-center flex-col justify-center">
            <div className={`p-8 bg-c-pink`}>
              <h1 className="text-4xl font-bold tracking-tight text-c-green text-center">This is my question of the day</h1>
            </div>
          </div>
        </div>
        
        <div className="flex-1 max-w-4xl flex items-center flex-col justify-center mx-auto">
          <div className="rounded-full my-4 w-xl">
            <div className="flex w-full justify-center flex-col items-center mx-auto p-3 sm:px-6 lg:px-8 max-w-4xl">
              <Post post={{User: userx, Content: "This is my post"}}/>
              <Post post={{User: userx, Content: "This is my post"}}/>
              <Post post={{User: userx, Content: "This is my post"}}/>
              <Post post={{User: userx, Content: "This is my post"}}/>
            </div>
          </div>
        </div>
      </>
    )
}

export default Feed;