'use client';

import { localizedModePath, type Locale } from '@/lib/localization/config';
import { type ThemePreference } from '@/lib/theme/config';
import Image from 'next/image';
import { LocalePill } from './LocalePill';
import { ThemePill } from './ThemePill';
import styles from './AuthHeader.module.css';

interface Props {
  locale: Locale;
  themePreference: ThemePreference;
}

export function AuthHeader({ locale, themePreference }: Props) {
  const homePath = localizedModePath('home', locale, themePreference);

  return (
    <header className={styles.header}>
      <div className={styles.inner}>
        <div className={styles.brand}>
          <a href={homePath} className={styles.brandLink} aria-label="RentalDriveGo home">
            <Image
              src="/rentaldrivego.png"
              alt="RentalDriveGo"
              width={36}
              height={36}
              priority
              unoptimized
              className={styles.mark}
            />
            <span>RentalDriveGo</span>
          </a>
        </div>

        <div className={styles.controls}>
          <div className={styles.pill}>
            <LocalePill locale={locale} />

            <span className={styles.divider} aria-hidden="true" />

            <ThemePill initialPreference={themePreference} />
          </div>
        </div>
      </div>
    </header>
  );
}
