import React from 'react';
import Link from 'next/link';
import { Film } from 'lucide-react';
import { cn } from '@/utils';

interface CanvasHeaderProps {
    title?: React.ReactNode;
    children?: React.ReactNode;
    rightContent?: React.ReactNode;
    className?: string;
}

export const CanvasHeader = ({ title = 'Pixel', children, rightContent, className }: CanvasHeaderProps) => {
    return (
        <header className={cn(
            "absolute top-0 left-0 right-0 h-16 z-50 flex items-center justify-between px-6 pointer-events-none",
            className
        )}>
            {/* Left: Logo */}
            <div className="flex items-center gap-3 pointer-events-auto min-w-[200px]">
                <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 text-white tracking-wide drop-shadow-md font-sans">{title}</span>
                </Link>
            </div>

            {/* Center: Children (Save Status) - Absolutely Centered */}
            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-auto">
                {children}
            </div>

            {/* Right: Content (Close Button) */}
            <div className="flex items-center justify-end min-w-[200px] pointer-events-auto">
                {rightContent}
            </div>
        </header>
    );
};
