import { Metadata } from "next";
import { BlogCard, BlogPostImage } from "@/components/blog/components";
import { getSinglePost } from "@/components/blog/hooks/SinglePostContent";
import { formatTimestampToSpanishDate } from "@/lib/utils";
import { getRecomendedPosts } from "@/components/blog/hooks/getRecomendedPosts";

interface Props {
  params: Promise<{
    slug: string;
  }>;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getSinglePost(slug);

  if (post)
    return {
      title: "Contigo Salud | " + post.seo_title,
      description: post.seo_description,
      keywords: post.seo_keywords,
      openGraph: {
        title: post.title,
        description: post.description,
        url: "url noticia",
        siteName: "Contigo salud",
        images: [
          {
            url: `${process.env.NEXT_PUBLIC_MEDIA_URL}${post.image}`,
            width: 800,
            height: 600,
            alt: post.seo_title,
          },
        ],
        type: "profile",
      },
      twitter: {
        card: "summary_large_image",
        title: "Contigo Salud | No encontrado",
        description: post?.description,
        images: [`${process.env.NEXT_PUBLIC_MEDIA_URL}${post.image}`],
      },
    };
  else
    return {
      title: "Contigo Salud | No encontrado",
      description: "El post que buscas fue eliminado.",
      openGraph: {
        title: "Contigo Salud | No encontrado",
        description: "El post que buscas fue eliminado.",
        url: "url noticia",
        siteName: "Contigo salud",
        images: [
          {
            url: "imagen noticia",
            width: 800,
            height: 600,
            alt: "Contigo Salud | No encontrado",
          },
        ],
        type: "profile",
      },
      twitter: {
        card: "summary_large_image",
        title: "Contigo Salud | No encontrado",
        description: "El post que buscas fue eliminado.",
        images: ["imagen noticia"],
      },
    };
}

export const SinglePostContent = async ({ params }: Props) => {
  const { slug } = await params;
  const post = await getSinglePost(slug);
  const recomended = await getRecomendedPosts();
  if (!post) return null;
  return (
    <>
      <div className="h-2/3 mt-40 md:mt-56 mb-6 md:mb-8">
        <div className="contigo-container">
          <section className="flex flex-col items-center justify-center gap-4">
            <div className="flex max-md:w-full md:gap-8 justify-between items-center text-xs md:text-base">
              <span className="font-medium text-contigo-violeta">{post.category}</span>
              <span>{formatTimestampToSpanishDate(post.date, true)}</span>
            </div>
            <h1 className="text-2xl md:text-5xl text-center md:px-16">{post.title}</h1>
            <p className="text-base md:text-2xl text-center md:px-16">{post.description}</p>
            <BlogPostImage src={`${process.env.NEXT_PUBLIC_MEDIA_URL}${post.image}`} title={post.title} />
            <div className="rich-text" dangerouslySetInnerHTML={{ __html: post.content }} />
          </section>
          {recomended && (
            <section className="mb-6 mt-12 md:mb-8 md:mt-24">
              <h2 className="text-2xl md:text-5xl mb-2.5 md:mb-6">Notas recomendadas</h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {recomended
                  .filter((s) => s.slug !== slug) // Evito recomendar el actual
                  .slice(0, 3)
                  .map((s, i) => (
                    <BlogCard key={i} blogPost={s} />
                  ))}
              </div>
            </section>
          )}
        </div>
      </div>
    </>
  );
};

export default SinglePostContent;