import { getArticle } from "@/app/_lib/data/article"
import MarkdownView from "@/app/_ui/MarkdownView"
import { faArrowRight } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import Image from "next/image"
import { MDXRemote } from 'next-mdx-remote/rsc'
import Link from "next/link"
import { mdxComponent } from "@/app/_lib/MdxComponent"
import { CustomMDX } from "@/app/_ui/customComponent"
const PICTURE_PREFIX = 'https://newuitab.oss-cn-hangzhou.aliyuncs.com/ai_upload/downloads/'
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
    const id = (await params).id
    const article = await getArticle(id)

    if (!article) return <></>
    return <div className="w-full h-full  min-h-[100vh] flex justify-center ">
        <div className="w-full max-w-[1000px] px-4 h-full  pb-[50px] pt-[30px] bg-white/50 shadow rounded-lg  ">
            <div className="w-full h-full ">
                <div className="flex gap-x-5">
                    <div className="p-4 mb-10  rounded-lg bg-white/60 shadow">
                        <img src={PICTURE_PREFIX + article?.cover} width={200} height={200} className=" rounded-lg shadow object-cover w-[200px] h-[200px]" alt="">
                        </img>
                    </div>
                    <div className="flex flex-col gap-y-3 py-5">
                        <h1 className="text-2xl">{article.title}</h1>
                        <article className="  line-clamp-3 overflow-hidden text-ellipsis">{article.description}</article>
                        <Link href={article.link} className="px-3 py-2 duration-150 bg-red-500 hover:bg-red-500/80 flex items-center justify-center rounded-lg text-white">
                            访问官网
                            <FontAwesomeIcon icon={faArrowRight} className="ml-2" />
                        </Link>
                    </div>
                </div>
                <div className="w-full">
                    <CustomMDX source={article.content} ></CustomMDX>
                </div>
            </div>
        </div>
    </div>
}