import { FC } from 'react';
import Topbar from './Topbar';
import Navbar from './Navbar';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
interface HeaderProps {
  sticky?: boolean;
  startPosition?: string;
  slug?: string;
  categories?: any;
}

// Use the defined type for the component's props
const Header: FC<HeaderProps> = ({ startPosition = 'tw-block', slug = '', sticky = true, categories = [] }) => {
  const { t } = useTranslation(['common', 'routes']);
  const { pathname } = useRouter();
  let translatedPath = pathname;
  translatedPath = translatedPath.replace('/[slug]', '')
  translatedPath = translatedPath ? t(`routes:${t('common:locale')}.${translatedPath}`) : "";

  if (slug) {
    translatedPath = translatedPath + '/' + slug;
  }
  return (
    <header className={`wrapper  tw-bg-secondary-color  tw-right-0 tw-left-0 ${startPosition}`}>
      <Topbar translatedPath={translatedPath} locale={t('common:locale')} trans={t} />
      <Navbar
        sticky={sticky}
        translatedPath={translatedPath}
        locale={t('common:locale')}
        trans={t}
        categories={categories}
      />
    </header>
  );
};

export default Header;