'use client';

import images from '@/assets/images/images';
import Navbar from '../navbar';
import Button, { IconButton } from '@/components/uikit/button';
import { Icon } from '@/components/uikit/icons';
import { useTranslations } from 'next-intl';
import routeFactory from '@/assets/constants/routeFactory';
import { useParams } from 'next/navigation';

export default function Header() {
  const t = useTranslations();
  const params = useParams();
  const locale = params.locale as string;

  const bannerFooter = [
    t('com_home_Banner_link1'),
    t('com_home_Banner_link2'),
    t('com_home_Banner_link3'),
  ];
  const routes = routeFactory(t, locale);

  return (
    <header
      className="relative w-full overflow-hidden bg-cover bg-right bg-no-repeat text-white md:h-screen"
      style={{ backgroundImage: `url(${images.homeBanner.src})` }}
    >
      <div className="absolute inset-0 z-0 bg-black opacity-50 blur-[100px]" />
      <Navbar />
      <div className="relative z-10 container mx-auto flex h-[80%] flex-col items-center bg-cover bg-center pb-6 text-white md:justify-between md:py-20">
        <div className="flex w-full flex-col justify-start">
          <h1 className="text-xl font-light md:text-5xl lg:text-7xl">
            {t('com_home_banner_title')}
          </h1>
          <h1 className="text-xl font-bold md:text-5xl lg:text-7xl">
            {t('com_home_banner_title_bold')}
          </h1>
          <p
            className="mt-2 mb-8 text-xs font-normal md:mt-5 md:text-sm lg:text-base"
            dangerouslySetInnerHTML={{
              __html: t('com_home_banner_description'),
            }}
          />
          <div>
            <Button endIcon="showMore" link={routes.productCategories.route()}>
              {t('com_home_banner_button')}
            </Button>
          </div>
        </div>

        <div className="text-nase flex w-full flex-col justify-center gap-8 border-t-0 border-white/10 pt-6 md:flex-row md:border-t-[1px] md:pt-12">
          {bannerFooter.map((item, index) => (
            <div
              key={index}
              className="flex items-center gap-2 hover:underline"
            >
              <Icon name="achievement" className="text-primary" />
              {item}
            </div>
          ))}
        </div>
      </div>
    </header>
  );
}
