import { LanguageSelector } from '@kit/ui/language-selector';

import { cn } from '../../lib/utils';

interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  logo?: React.ReactNode;
  navigation?: React.ReactNode;
  actions?: React.ReactNode;
}

export const Header: React.FC<HeaderProps> = function ({
  className,
  logo,
  navigation,
  actions,
  ...props
}) {
  return (
    <div
      className={cn(
        'site-header bg-background/80 dark:bg-background/50 sticky top-0 z-10 w-full py-1 backdrop-blur-md',
        className,
      )}
      {...props}
    >
      <div className="container">
        <div className="2xs:h-14 2xs:grid-cols-3 grid h-24 w-full items-center">
          <div className={'mx-auto flex'}>{logo}</div>
          <div className="2xs:order-none order-first">{navigation}</div>

          <div className="2xs:justify-end 2xs:gap-x-2 flex items-center justify-evenly">
            <div className="max-w-[100px]">
              <LanguageSelector />
            </div>
            {actions}
          </div>
        </div>
      </div>
    </div>
  );
};
