import React, { forwardRef } from "react";
import { BaseComponentProps } from "../../types";
import { Button } from "../ui/Button";

export interface HeaderProps extends BaseComponentProps {
  logo?: React.ReactNode;
  navigation?: Array<{
    label: string;
    href?: string;
    onClick?: () => void;
  }>;
  actions?: React.ReactNode;
  sticky?: boolean;
}

export const Header = forwardRef<HTMLElement, HeaderProps>(
  (
    {
      className = "",
      logo,
      navigation = [],
      actions,
      sticky = false,
      children,
      ...props
    },
    ref
  ) => {
    const stickyClasses = sticky ? "sticky top-0 z-50" : "";

    return (
      <header
        ref={ref}
        className={`bg-background border-b border-border ${stickyClasses} ${className}`}
        {...props}
      >
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            {/* Logo */}
            <div className="flex-shrink-0">
              {logo || (
                <div className="text-xl font-bold text-foreground">Logo</div>
              )}
            </div>

            {/* Navigation */}
            {navigation.length > 0 && (
              <nav className="hidden md:flex space-x-8">
                {navigation.map((item, index) => (
                  <Button
                    key={index}
                    variant="ghost"
                    onClick={item.onClick}
                    className="text-muted-foreground hover:text-foreground"
                  >
                    {item.label}
                  </Button>
                ))}
              </nav>
            )}

            {/* Actions */}
            <div className="flex items-center space-x-4">
              {actions || (
                <Button variant="outline" size="sm">
                  Login
                </Button>
              )}
            </div>
          </div>
        </div>

        {children}
      </header>
    );
  }
);

Header.displayName = "Header";