import Image from "next/image";
import React from "react";
import UserPostCard from "../Shared/UserPostCard";
import PostEditor from "../Shared/PostEditor";
import { Post } from "@/types/custom/user";
import { headers, type UnsafeUnwrappedHeaders } from "next/headers";

const Home: React.FC<{ posts: Post[] }> = ({ posts }) => {
  const token = (headers() as unknown as UnsafeUnwrappedHeaders).get("waalook-auth-header");

  if (!token) {
    return null;
  }
  return (
    <>
      <div className="bg-white flex items-center h-[77px] pb-4 border-b px-4 overflow-x-auto no-scrollbar">
        <div className="flex items-center space-x-4 pr-8">
          {[...Array(12)].map((_, index) => (
            <Image
              key={index}
              height={500}
              width={500}
              src="/assets/images/interior.webp"
              alt="Profile"
              className="w-16 h-14 rounded-xl ring-2 ring-primary-300 border-4 border-white flex-shrink-0"
            />
          ))}
        </div>
      </div>
      <div className="bg-white border-b p-4">
        <PostEditor token={token} />
      </div>
      <div className="bg-white">
        {posts.map((post, i) => (
          <UserPostCard key={i} {...post} />
        ))}
      </div>
    </>
  );
};

export default Home;