import Link from "next/link"
import { ButtonPrimary } from "./button"
import { Icon } from "@iconify/react"

export const SimpleArticle = ({
  children
}: {
  children: React.ReactNode
}) => (
  <main className="flex items-center pt-16 md:pt-24 pb-12 px-8 md:px-0">
    <div className="mx-auto w-[480px] md:w-[520px]">
      <Link href={"../"}>
        <ButtonPrimary className="mb-8">
          <Icon icon={"lucide:chevron-left"} />
          Back
        </ButtonPrimary>
      </Link>
      <article className="space-y-5 [&_p]:leading-relaxed [&_p]:text-sm [&_li]:text-sm relative [&_h1]:text-2xl [&_h2]:text-xl">
        {children}
      </article>
    </div>
  </main>
)