'use client';
import { IBreadcrumbItem, pageStore } from '@/shared/store/pageStore';
import React, { useEffect } from 'react';
import PaginationPage from './PaginationPage';

const Headerbanner = () => {
  const breadcrumsItem: IBreadcrumbItem[] = [
    {
      label: 'Home',
      href: '/',
    },
  ];

  const { title, onChangePage } = pageStore((state) => state);

  useEffect(() => {
    onChangePage({
      title: 'Home',
      breadcrumbs: breadcrumsItem,
    });
  }, []);

  return (
    <div className="text-white relative">
      <div className="absolute inset-0 bg-[url(/images/header-banner/header-banner.webp)] bg-cover bg-center brightness-60">
        <div className="absolute inset-0 bg-primary/10"></div>
      </div>

      <div className="custom-container relative z-10 py-2">
        <div className="flex justify-center items-center min-h-[180px] md:min-h-[200px] lg:min-h-[270px] flex-col">
          <div className="flex justify-center items-center gap-2">
            <PaginationPage />
          </div>
          <div className="text-[35px] sm:text-[40px] md:text-[50px] font-bold text-shadow-sm text-center">
            {title}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Headerbanner;
