import { cta } from "@/lib/blog/config";
import Link from "next/link";

/** The blog's one call to action: under the table of contents and at the end of every post. */
export function CallToActionBox({ id }: { id: string }) {
  return (
    <aside
      aria-labelledby={id}
      className="bg-blog-soft ring-blog-line rounded-2xl p-5 ring-1"
    >
      <h2 id={id} className="text-blog-ink text-base font-bold">
        {cta.heading}
      </h2>
      <p className="text-blog-muted mt-2 text-sm leading-relaxed">{cta.body}</p>
      <Link
        href={cta.href}
        className="bg-blog-accent text-blog-on-accent mt-4 inline-block rounded-lg px-4 py-2 text-sm font-semibold hover:opacity-90"
      >
        {cta.label}
      </Link>
    </aside>
  );
}