import { type ReactNode } from 'react'
import Link from 'next/link'

import { Container } from '@/components/Container'

export function GradientCallout({
  eyebrow,
  title,
  titleId,
  cta,
  children,
}: {
  eyebrow?: string
  title: string
  titleId?: string
  cta?: { href: string; label: string }
  children?: ReactNode
}) {
  return (
    <Container>
      <div className="relative isolate overflow-hidden bg-slate-900 px-6 py-10 text-center shadow-2xl sm:rounded-3xl sm:px-12 sm:py-12">
        {eyebrow ? (
          <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-blue-400">
            {eyebrow}
          </p>
        ) : null}
        <h2
          id={titleId}
          className="text-balance font-display text-2xl tracking-tight text-white sm:text-3xl"
        >
          {title}
        </h2>
        {children ? (
          <div className="mx-auto mt-4 max-w-2xl text-pretty text-base/7 text-slate-300">
            {children}
          </div>
        ) : null}
        {cta ? (
          <div className="mt-6">
            <Link
              href={cta.href}
              className="text-sm font-semibold text-white hover:text-blue-300"
            >
              {cta.label} <span aria-hidden="true">→</span>
            </Link>
          </div>
        ) : null}
        <svg
          viewBox="0 0 1024 1024"
          aria-hidden="true"
          className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2 -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]"
        >
          <circle
            r={512}
            cx={512}
            cy={512}
            fill="url(#gradient-callout)"
            fillOpacity="0.7"
          />
          <defs>
            <radialGradient id="gradient-callout">
              <stop stopColor="#3b82f6" />
              <stop offset={1} stopColor="#06b6d4" />
            </radialGradient>
          </defs>
        </svg>
      </div>
    </Container>
  )
}
