refactor(shared-error-page): update error page to use translation keys for dynamic content

app/components/emails/shared-error-page.tsx

@@ -1,34 +1,48 @@
 "use client"
 
+import { useTranslations } from "next-intl"
 import { AlertCircle } from "lucide-react"
 import { Card } from "@/components/ui/card"
 import { BrandHeader } from "@/components/ui/brand-header"
 import { FloatingLanguageSwitcher } from "@/components/layout/floating-language-switcher"
 
 interface SharedErrorPageProps {
-  title: string
-  subtitle: string
-  error: string
-  description: string
-  ctaText: string
+  titleKey: string
+  subtitleKey: string
+  errorKey: string
+  descriptionKey: string
+  ctaTextKey: string
 }
 
-export function SharedErrorPage({ title, subtitle, error, description, ctaText }: SharedErrorPageProps) {
+export function SharedErrorPage({
+  titleKey,
+  subtitleKey,
+  errorKey,
+  descriptionKey,
+  ctaTextKey,
+}: SharedErrorPageProps) {
+  const tShared = useTranslations("emails.shared")
+
+  const resolvedTitle = tShared(titleKey)
+  const resolvedSubtitle = tShared(subtitleKey)
+  const resolvedError = tShared(errorKey)
+  const resolvedDescription = tShared(descriptionKey)
+  const resolvedCtaText = tShared(ctaTextKey)
+
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col justify-center items-center">
       <div className="container mx-auto p-4 max-w-4xl">
         <BrandHeader
-          title={title}
-          subtitle={subtitle}
-          showCta={true}
-          ctaText={ctaText}
+          title={resolvedTitle}
+          subtitle={resolvedSubtitle}
+          ctaText={resolvedCtaText}
         />
-        <div className="text-center">
+        <div className="text-center mt-6">
           <Card className="max-w-md mx-auto p-8 text-center space-y-4">
             <AlertCircle className="h-12 w-12 mx-auto text-destructive" />
-            <h2 className="text-2xl font-bold">{error}</h2>
+            <h2 className="text-2xl font-bold">{resolvedError}</h2>
             <p className="text-gray-500">
-              {description}
+              {resolvedDescription}
             </p>
           </Card>
         </div>
@@ -37,4 +51,4 @@ export function SharedErrorPage({ title, subtitle, error, description, ctaText }
       <FloatingLanguageSwitcher />
     </div>
   )
-}
+}