"use client";

import { useEffect, useState } from "react";
import Detail from "./detail";
import Head from "./head";
import RelatedContent from "./relatedContent";

function BlogPage({ article, articles }) {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
      <Head data={article} loading={loading} />
      <div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
        <Detail data={article} loading={loading} />
        <RelatedContent data={articles} loading={loading} />
      </div>
    </div>
  );
}

export default BlogPage;
