'use client';

import { useState, useEffect } from 'react';
import { cn } from '@/lib/utils';

interface StickyHeaderWrapperProps {
  children: React.ReactNode;
}

export function StickyHeaderWrapper({ children }: StickyHeaderWrapperProps) {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <header
      className={cn(
        'sticky top-0 z-50 w-full bg-deep-black border-b transition-all duration-300',
        isScrolled ? 'border-crimson-red shadow-lg' : 'border-crimson-red'
      )}
      style={{ borderBottomWidth: '1px', borderBottomColor: '#E60023' }}
    >
      {children}
    </header>
  );
}
