import { getTranslations } from 'next-intl/server'
import { Link } from '@/i18n/navigation'

/**
 * Caja de servicio con la estructura EXACTA de Django: title-box-content con
 * <h2> + enlaces "back-to-account" / "back-to-account-responsive", y el cuerpo
 * en body-box-content justified. Se usa dentro de <PageShell>.
 */
export async function ServiceBox({
  heading,
  children,
}: {
  heading?: string
  children: React.ReactNode
}) {
  const t = await getTranslations('Services')
  return (
    <div className="box-content">
      <div className="title-box-content">
        <h2>{heading ?? t('info')}</h2>
        <Link className="back-to-account" href="/my-account">
          {t('back')}
        </Link>
        <Link className="back-to-account-responsive" href="/my-account">
          {t('backShort')}
        </Link>
      </div>
      <div className="body-box-content justified">{children}</div>
    </div>
  )
}