'use client';

import React from 'react';
import Link from 'next/link';
import { Film } from 'lucide-react';
import { UserAvatar } from '@/components/canvas/UserAvatar';

export function Header() {

  return (
    <header className="h-16 border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
      <div className="container h-full max-w-[1600px] mx-auto flex items-center justify-between px-4 sm:px-6">
        {/* Left: Logo & Navigation */}
        <div className="flex items-center gap-6">
          <Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
            <div className="w-9 h-9 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-900/20 ring-1 ring-white/10">
              <Film className="text-white w-5 h-5" strokeWidth={2.5} />
            </div>
            <span className="text-lg font-bold tracking-wide font-sans">Pixel</span>
          </Link>

          <nav className="hidden md:flex items-center gap-6 text-sm font-medium text-muted-foreground">
            <Link href="/" className="text-foreground transition-colors">
              工作空间
            </Link>
          </nav>
        </div>

        {/* Right: User Avatar */}
        <div className="flex items-center gap-4">
          <UserAvatar />
        </div>
      </div>
    </header>
  );
}
