'use client';

import { useT, useLocale } from '@/lib/i18n/react';
import { formatAgorotLocale } from '@/lib/money';
import type { Config } from './config';
import type { GreetingData } from './loadData';

export function Component({ config: _config, data }: { config: Config; data: unknown }) {
  const t = useT('greeting-bar');
  const { locale } = useLocale();
  const greeting = data as GreetingData | null;

  const firstName = greeting?.displayName ?? null;

  return (
    <div className="px-6 pb-3 pt-4" aria-label={t('greeting_region')}>
      <p className="text-text-muted font-[family-name:var(--font-he)] text-base leading-tight">
        {firstName ? (
          <>
            {t('hello')}{' '}
            <span className="text-text-primary font-[var(--font-weight-extrabold)]">
              {firstName}
            </span>{' '}
            👋
          </>
        ) : (
          `${t('hello_guest')} 👋`
        )}
      </p>
      {greeting?.monthlySavingsShekels != null && greeting.monthlySavingsShekels > 0 && (
        <p className="text-text-muted mt-0.5 font-[family-name:var(--font-he)] text-sm">
          {t('savings_label')}{' '}
          <b className="text-success-700">
            {formatAgorotLocale(Math.round(greeting.monthlySavingsShekels * 100), locale)}
          </b>
        </p>
      )}
    </div>
  );
}