import type { ReactNode } from 'react';

import { API_MODE } from '@/api';
import { t } from '@/i18n';

export function AuthLayout({ title, children }: { title: string; children: ReactNode }) {
  return (
    <div className="flex min-h-screen items-center justify-center bg-cream p-6">
      <div className="w-full max-w-[420px]">
        <div className="mb-4 flex items-baseline gap-2">
          <div className="border-[3px] border-ink bg-yellow px-3 py-2 font-display text-[15px] font-black tracking-tight shadow-brutal-md">
            {t('header.title')}
          </div>
          {API_MODE === 'mock' ? (
            <span className="border-2 border-ink bg-blue px-2 py-1 font-display text-[9px] font-extrabold uppercase">
              {t('header.mockMode')}
            </span>
          ) : null}
        </div>
        <div className="border-[3px] border-ink bg-paper shadow-brutal-lg">
          <div className="bg-ink px-4 py-3 font-display text-[13px] font-black uppercase tracking-widest text-cream">
            {title}
          </div>
          <div className="p-5">{children}</div>
        </div>
      </div>
    </div>
  );
}