import clsx from 'clsx';
import { Container } from '@/components/container';
import { HeaderLogo, HeaderTopbar } from '.';
import { useDemo2Layout } from '../';
import { useEffect } from 'react';
import { toAbsoluteUrl } from '@/utils';

const Header = () => {
  const { headerSticky } = useDemo2Layout();

  useEffect(() => {
    if (headerSticky) {
      document.body.setAttribute('data-sticky-header', 'on');
    } else {
      document.body.removeAttribute('data-sticky-header');
    }
  }, [headerSticky]);

  return (
    <header
      className={clsx(
        'flex items-center transition-[height] shrink-0  h-[--tw-header-height] bg-[length:600px]  bg-no-repeat bg-red-600',
        headerSticky &&
          'transition-[height] fixed z-10 top-0 left-0 right-0 shadow-sm backdrop-blur-md bg-white/70 dark:bg-coal-500/70 dark:border-b dark:border-b-coal-100'
      )}
      style={{
        backgroundImage: `url('${toAbsoluteUrl('/media/images/2600x1200/bg-14.png')}')`
      }}
    >
      <Container className="flex justify-between items-center lg:gap-4">
        <HeaderLogo />
        <HeaderTopbar />
      </Container>
    </header>
  );
};

export { Header };