Añade lógica para seleccionar patrones de formato de fecha basados en…

… el idioma

src/app/services/date-formatter.service.ts

@@ -10,6 +10,7 @@ import localeEn from '@angular/common/locales/en'
 })
 export class DateFormatterService {
   private readonly translate = inject(TranslateService)
+
   constructor () {
     registerLocaleData(localeEs, 'es')
     registerLocaleData(localeCa, 'ca')
@@ -18,7 +19,9 @@ export class DateFormatterService {
 
   format (date: Date, pattern: string = 'dd MMMM yyyy'): string {
     const localeId = this.getLocaleId(this.translate.currentLang)
-    return formatDate(date, pattern, localeId)
+    // Selecciona un patrón de formato basado en el idioma actual
+    const formatPattern = this.getFormatPattern(this.translate.currentLang, pattern)
+    return formatDate(date, formatPattern, localeId)
   }
 
   private getLocaleId (lang: string): string {
@@ -29,4 +32,14 @@ export class DateFormatterService {
       default: return 'en-US'
     }
   }
+
+  // Seleccionar el patrón de formato basado en el idioma
+  private getFormatPattern (lang: string, defaultPattern: string): string {
+    if (lang === 'en') {
+      // Patrón de formato para inglés
+      return 'MMMM dd, yyyy'
+    }
+    // Retorna el patrón por defecto para los demás idiomas
+    return defaultPattern
+  }
 }

src/app/shared/components/challenge-card/challenge-card.component.html

@@ -49,7 +49,7 @@
       </div>
       <div class="stat d-flex align-items-center" ngbTooltip="Fecha creación">
         <div><img src="assets/img/icon/clock.svg" alt="Date"></div>
-        <div>{{creation_date}}</div>
+        <div>{{formattedDate}}</div>
 
 
       </div>

src/app/shared/components/challenge-card/challenge-card.component.ts

@@ -1,19 +1,44 @@
-import { Component, Input, inject } from '@angular/core'
+import { Component, Input, type OnInit, type OnDestroy, inject } from '@angular/core'
+import { Subscription } from 'rxjs'
 import { StarterService } from '../../../services/starter.service'
+import { DateFormatterService } from '../../../services/date-formatter.service'
+// Cambia la importación de tipo solamente a una importación normal aquí
+import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'app-challenge-card',
   templateUrl: './challenge-card.component.html',
   styleUrls: ['./challenge-card.component.scss'],
   providers: []
 })
-export class ChallengeCardComponent {
+export class ChallengeCardComponent implements OnInit, OnDestroy {
   private readonly starterService = inject(StarterService)
+  private readonly dateFormatter = inject(DateFormatterService)
+  private readonly translate = inject(TranslateService)
+  private translateSubscription!: Subscription
+  formattedDate: string = ''
 
   @Input() title: string = ''
   @Input() languages: any = []
   @Input() creation_date!: Date
   @Input() level = ''
   @Input() popularity!: number
   @Input() id = ''
+
+  ngOnInit (): void {
+    this.updateFormattedDate()
+    this.translateSubscription = this.translate.onLangChange.subscribe(() => {
+      this.updateFormattedDate()
+    })
+  }
+
+  ngOnDestroy (): void {
+    if (this.translateSubscription instanceof Subscription) {
+      this.translateSubscription.unsubscribe()
+    }
+  }
+
+  private updateFormattedDate (): void {
+    this.formattedDate = this.dateFormatter.format(this.creation_date)
+  }
 }