404 Section 1

import { buttonVariants } from "@/components/ui/button"
import Link from "next/link"

type Props = {
  taglineText?: string
  title?: string
  description?: string
  cta?: { label: string; href: string }
}

const defaultProps = {
  taglineText: "404 section 1",
  title: "Page not found",
  description:
    "Sorry, we couldn't find the page you're looking for. Please check the URL or navigate back home.",
  cta: { label: "Go to homepage", href: "/" },
}

export function X404Section1({
  taglineText = defaultProps.taglineText,
  title = defaultProps.title,
  description = defaultProps.description,
  cta = defaultProps.cta,
}: Props) {
  return (
    <section className="bg-background" aria-labelledby="404-section-1-heading">
      <div className="wrapper">
        <div className="flex flex-col items-center text-center">
          <div className="tagline">{taglineText}</div>
          <h1 id="404-section-1-heading" className="heading-xl">
            {title}
          </h1>
          <p className="paragraph mb-8 max-w-xl">{description}</p>
          <Link
            href={cta.href}
            className={buttonVariants()}
            data-slot="button"
            data-variant="default"
          >
            {cta.label}
          </Link>
        </div>
      </div>
    </section>
  )
}