'use client';

import Image from 'next/image';
import Link from 'next/link';
import UserMenu from '@/components/UserMenu';

export function SimpleHeader() {
  return (
    <div className="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 pb-4 mb-4 border-b">
      <div className="mb-4 flex items-center justify-between">
        <Link href="/" aria-label="Home">
          <Image
            src="/logo.png"
            alt="PunimTag"
            width={300}
            height={80}
            className="h-20 w-auto cursor-pointer hover:opacity-80 transition-opacity"
            priority
          />
        </Link>
        <div className="flex items-center gap-2">
          <UserMenu />
        </div>
      </div>
      <p className="text-lg font-medium text-orange-600 dark:text-orange-500 tracking-wide">
        Browse our photo collection
      </p>
    </div>
  );
}