'use client';

import { TopicsEnum } from '@/config/enums';
import { api } from '@/lib/trpc/client';
import { Paperclip } from 'lucide-react';

const EmneHeader = ({ slug }: { slug: string }) => {
  const { data: total = 0 } = api.posts.count.useQuery({
    tagSlug: slug
  });
  const title = slug === TopicsEnum.KBHPLUS ? 'KBH+' : slug?.replace('-', ' ');

  return (
    <section className='border-b border-b-neutral-200 bg-[#F4F2ED]'>
      <div className='mx-auto w-full max-w-[1362px] grow p-3 md:p-[30px] xl:border-x'>
        <div className='sm:ml-0 xl:ml-68'>
          <div className='flex w-fit min-w-1/2 flex-col border-b border-b-neutral-200 pb-1'>
            <Paperclip className='stroke-client-red mb-1 inline size-4' />
            <p className='text-xs text-neutral-500 uppercase'>Emne</p>
            <h1 className='text-5xl font-bold text-neutral-700 capitalize'>
              {title}
            </h1>
          </div>
          <p className='mt-1 font-serif text-xl text-neutral-700'>
            {total} artikler
          </p>
        </div>
      </div>
    </section>
  );
};

export default EmneHeader;