'use client';

import Link from 'next/link';
import { Star, Flame, Lock, Coins } from 'lucide-react';
import Mascot from '../Mascot';
import type { MascotSkin } from '@/lib/skins';
import DemoBadge from '../DemoBadge';
import { bn } from '@/lib/bn';

/**
 * Top bar for the kids' app: mascot greeting, star count, streak, and a
 * discreet "Parent Zone" lock (placed to the far corner so children don't
 * reach for it first).
 */
export default function AppHeader({
  stars,
  coins = 0,
  streak,
  name = 'বন্ধু',
  skin,
}: {
  stars: number;
  coins?: number;
  streak: number;
  name?: string;
  skin?: MascotSkin;
}) {
  return (
    <header className="sticky top-0 z-30 bg-cream/90 px-4 pb-3 pt-4 backdrop-blur sm:px-6">
      <div className="mx-auto flex max-w-3xl items-center justify-between gap-3">
        <div className="flex items-center gap-2.5">
          <Mascot mood="happy" size={44} skin={skin} />
          <div className="leading-tight">
            <p className="text-xs text-ink-faint">স্বাগতম</p>
            <p className="font-heading text-lg font-bold text-ink">হ্যালো, {name}!</p>
          </div>
          <DemoBadge className="ml-1 hidden sm:inline-flex" />
        </div>

        <div className="flex items-center gap-2">
          <div className="flex items-center gap-1 rounded-full bg-sun-100 px-3 py-1.5 text-sm font-bold text-sun-600">
            <Star className="h-4 w-4 fill-sun-500 text-sun-500" />
            {bn(stars)}
          </div>
          <div className="hidden items-center gap-1 rounded-full bg-leaf-100 px-3 py-1.5 text-sm font-bold text-leaf-600 xs:flex sm:flex">
            <Coins className="h-4 w-4" />
            {bn(coins)}
          </div>
          <div className="flex items-center gap-1 rounded-full bg-mango-100 px-3 py-1.5 text-sm font-bold text-mango-600">
            <Flame className="h-4 w-4 fill-mango-500 text-mango-500" />
            {bn(streak)}
          </div>
          <Link
            href="/app/parent"
            aria-label="Parent Zone"
            title="Parent Zone"
            className="flex h-9 w-9 items-center justify-center rounded-full text-ink-faint transition hover:bg-cream-200 hover:text-ink-soft"
          >
            <Lock className="h-4 w-4" />
          </Link>
        </div>
      </div>
    </header>
  );
}