Formatere datoer, tall og flertall etter lokalisering

// lib/format-date.ts
export function formatDate(
  date: Date,
  locale: string,
  options: Intl.DateTimeFormatOptions = { dateStyle: 'long' }
): string {
  return new Intl.DateTimeFormat(locale, options).format(date);
}

// Usage examples:
// formatDate(new Date(), 'en-US') => 'June 7, 2025'
// formatDate(new Date(), 'de-DE') => '7. Juni 2025'
// formatDate(new Date(), 'tr-TR') => '7 Haziran 2025'
// formatDate(new Date(), 'ja-JP') => '2025年6月7日'

// app/[locale]/blog/[slug]/page.tsx
import { formatDate } from '@/lib/format-date';

interface Props {
  params: Promise<{ locale: string; slug: string }>;
}

export default async function BlogPost({ params }: Props) {
  const { locale, slug } = await params;

  // In a real app you would fetch the post from a DB or CMS
  const publishedAt = new Date('2025-06-07T09:00:00Z');

  return (
    <article>
      <time dateTime={publishedAt.toISOString()}>
        {formatDate(publishedAt, locale, { dateStyle: 'full', timeStyle: 'short' })}
      </time>
      <h1>Post: {slug}</h1>
    </article>
  );
}

// lib/format-number.ts
export function formatCurrency(
  amount: number,
  currency: string,
  locale: string
): string {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency,
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(amount);
}

export function formatNumber(
  value: number,
  locale: string,
  options?: Intl.NumberFormatOptions
): string {
  return new Intl.NumberFormat(locale, options).format(value);
}

// formatCurrency(1234.5, 'USD', 'en-US') => '$1,234.50'
// formatCurrency(1234.5, 'EUR', 'de-DE') => '1.234,50 €'
// formatCurrency(1234.5, 'TRY', 'tr-TR') => '₺1.234,50'

const locales = ['en-US', 'de-DE', 'tr-TR', 'ja-JP', 'ar-SA'];
const date = new Date('2025-06-07T14:30:00Z');
const price = 9999.99;

for (const locale of locales) {
  const formattedDate = new Intl.DateTimeFormat(locale, {
    dateStyle: 'medium',
    timeStyle: 'short',
  }).format(date);

  const formattedPrice = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: 'USD',
  }).format(price);

  console.log(`[${locale}]  date: ${formattedDate}  |  price: ${formattedPrice}`);
}

// lib/pluralize.ts
type PluralForms = Partial<Record<Intl.LDMLPluralRule, string>>;

export function pluralize(
  count: number,
  locale: string,
  forms: PluralForms
): string {
  const rules = new Intl.PluralRules(locale);
  const category = rules.select(count); // 'zero'|'one'|'two'|'few'|'many'|'other'
  const template = forms[category] ?? forms['other'] ?? '';
  return template.replace('{{count}}', String(count));
}

// English
// pluralize(1, 'en', { one: '{{count}} item', other: '{{count}} items' })
// => '1 item'

// pluralize(5, 'en', { one: '{{count}} item', other: '{{count}} items' })
// => '5 items'

// Arabic (6 forms)
// pluralize(11, 'ar', { zero:'...', one:'...', two:'...', few:'...', many:'{{count}} عنصرًا', other:'...' })
// => '11 عنصرًا'

// app/[locale]/cart/page.tsx
import { pluralize } from '@/lib/pluralize';
import { formatCurrency } from '@/lib/format-number';

interface Props {
  params: Promise<{ locale: string }>;
}

// Minimal translation catalog — in real projects use next-intl or similar
const itemForms: Record<string, Record<string, string>> = {
  'en-US': { one: '{{count}} item',     other: '{{count}} items' },
  'de-DE': { one: '{{count}} Artikel',  other: '{{count}} Artikel' },
  'tr-TR': { one: '{{count}} ürün',     other: '{{count}} ürün' },
};

export default async function CartPage({ params }: Props) {
  const { locale } = await params;
  const itemCount = 3;
  const total = 129.99;
  const forms = itemForms[locale] ?? itemForms['en-US'];

  return (
    <section>
      <p>{pluralize(itemCount, locale, forms)}</p>
      <p>Total: {formatCurrency(total, 'USD', locale)}</p>
    </section>
  );
}

// lib/format-relative.ts
export function formatRelative(date: Date, locale: string): string {
  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
  const diffMs = date.getTime() - Date.now();
  const diffSec = Math.round(diffMs / 1000);

  const thresholds: [number, Intl.RelativeTimeFormatUnit][] = [
    [60, 'second'],
    [3600, 'minute'],
    [86400, 'hour'],
    [2592000, 'day'],
    [31536000, 'month'],
  ];

  for (const [limit, unit] of thresholds) {
    if (Math.abs(diffSec) < limit) {
      const divisor = unit === 'second' ? 1
        : unit === 'minute' ? 60
        : unit === 'hour' ? 3600
        : unit === 'day' ? 86400
        : 2592000;
      return rtf.format(Math.round(diffSec / divisor), unit);
    }
  }

  return rtf.format(Math.round(diffSec / 31536000), 'year');
}

// formatRelative(new Date(Date.now() - 90000), 'en-US') => '2 minutes ago'
// formatRelative(new Date(Date.now() - 90000), 'de-DE') => 'vor 2 Minuten'

'use client';

import { useMemo } from 'react';

interface Props {
  date: string; // ISO string — safe to serialize from Server to Client
  options?: Intl.DateTimeFormatOptions;
}

export function FormattedDate({ date, options = { dateStyle: 'medium' } }: Props) {
  // navigator.language gives the browser's locale, e.g. 'en-GB'
  const formatted = useMemo(() => {
    return new Intl.DateTimeFormat(navigator.language, options).format(
      new Date(date)
    );
  }, [date, options]);

  return <time dateTime={date}>{formatted}</time>;
}