'use client';

import { DistrictsEnum } from '@/config/enums';
import { api } from '@/lib/trpc/client';

const BydelHeader = ({
  location,
  title
}: {
  location: DistrictsEnum;
  title: string;
}) => {
  const { data: total = 0 } = api.posts.count.useQuery({
    location
  });

  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'>
            <svg
              id='map-pin'
              className='fill-client-red mb-1 inline size-4'
              width='64.615px'
              height='96.922px'
              viewBox='0 0 64.615 96.922'
            >
              <path
                d='M62.532,43.603L39.564,92.442c-1.325,2.776-4.228,4.48-7.257,4.48s-5.931-1.704-7.193-4.48L2.083,43.603
		C0.442,40.132,0,36.156,0,32.307C0,14.45,14.45,0,32.307,0c17.857,0,32.308,14.45,32.308,32.307
		C64.615,36.156,64.173,40.132,62.532,43.603z M32.307,16.154c-8.896,0-16.153,7.257-16.153,16.153
		c0,8.897,7.257,16.154,16.153,16.154c8.897,0,16.154-7.257,16.154-16.154C48.461,23.411,41.204,16.154,32.307,16.154z'
              />
            </svg>
            <p className='text-xs tracking-wider text-neutral-500 uppercase'>
              Bydel
            </p>
            <h1 className='text-5xl font-bold text-neutral-700'>{title}</h1>
          </div>
          <p className='mt-1 text-xl text-neutral-700'>{total} artikler</p>
        </div>
      </div>
    </section>
  );
};

export default BydelHeader;