import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { LanguageSwitcher } from './LanguageSwitcher';

export function Header() {
  const t = useTranslations('header');
  const c = useTranslations('common');
  return (
    <header className="border-b border-brand-700 bg-brand-600 text-white">
      <div className="mx-auto flex max-w-5xl items-center justify-between gap-3 px-4 py-3 sm:py-5">
        <div className="flex min-w-0 items-center gap-3">
          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white p-1 shadow-sm sm:h-12 sm:w-12 sm:p-1.5">
            <Image
              src="/gasol247-logo.png"
              alt="Gasol247"
              width={48}
              height={62}
              priority
              className="h-full w-auto object-contain"
            />
          </div>
          <div className="min-w-0">
            <div className="truncate text-sm font-semibold sm:text-base">
              {c('siteName')}
            </div>
            <div className="truncate text-xs text-white/80">
              {t('tagline')}
            </div>
          </div>
        </div>
        <LanguageSwitcher />
      </div>
    </header>
  );
}