import { PublicLayout } from '@/components/layout/public/public-layout';
import CityChangeList from './_components/city-change-list';
import Link from 'next/link';
import { createHelpers } from '@/lib/trpc/server';
import { HydrationBoundary } from '@tanstack/react-query';

export default async function CityChangePage({
  searchParams
}: {
  searchParams?: Promise<Record<string, string>>;
}) {
  const filters = await searchParams;
  const helpers = await createHelpers();

  await helpers.citychange.paginate.prefetchInfinite({
    filters
  });

  return (
    <PublicLayout>
      <section className='border-b border-b-neutral-200 bg-[#41617F]'>
        <div className='mx-auto block w-full max-w-[1362px] grow gap-8 p-3 md:flex md:pt-11 xl:px-8'>
          <div className='flex w-full shrink-0 items-center justify-center md:w-45 xl:w-60'>
            <svg
              xmlns='http://www.w3.org/2000/svg'
              width='105.985'
              height='127.032'
              viewBox='0 0 105.985 127.032'
              className='w-16 md:w-26'
            >
              <g id='cc-logo-no_text' transform='translate(-61.17 -39.57)'>
                <path
                  id='Path_6'
                  data-name='Path 6'
                  d='M76.55,55.1Q91.93,39.573,114.015,39.57A51.241,51.241,0,0,1,151.627,55.1a51.222,51.222,0,0,1,15.528,37.613,51.1,51.1,0,0,1-13.69,35.621c-1.374,1.476-2.752,1.522-4.121.153l-17.4-17.821a1.768,1.768,0,0,1,0-2.778,22.147,22.147,0,0,0,5.683-15.058,20.386,20.386,0,0,0-6.745-15.615,23.015,23.015,0,0,0-16.223-6.24,22.259,22.259,0,0,0-16,6.306,20.709,20.709,0,0,0-6.633,15.661,22.243,22.243,0,0,0,5.356,14.951,1.843,1.843,0,0,1-.107,2.885L79.425,128.643q-1.915,1.9-3.973-.153Q61.167,113.761,61.17,92.716A52.6,52.6,0,0,1,76.555,55.1Z'
                  fill='#fff'
                />
                <path
                  id='Path_7'
                  data-name='Path 7'
                  d='M149.745,145.785A17.3,17.3,0,1,1,167.05,128.48,17.306,17.306,0,0,1,149.745,145.785Z'
                  transform='translate(-34.878 -35.044)'
                  fill='#fff'
                />
                <path
                  id='Path_8'
                  data-name='Path 8'
                  d='M136.477,237.279a2.123,2.123,0,0,1-2.992,0L103.409,207.2a2.123,2.123,0,0,1,0-2.992l18.214-18.219a2.123,2.123,0,0,1,2.992,0l8.87,8.87a2.123,2.123,0,0,0,2.992,0l8.992-8.992a2.123,2.123,0,0,1,2.992,0l18.219,18.214a2.123,2.123,0,0,1,0,2.992l-30.2,30.209Z'
                  transform='translate(-20.369 -71.293)'
                  fill='#fff'
                />
              </g>
            </svg>
          </div>
          <div className='grow'>
            <div className='ml-0 xl:ml-4'>
              <div className='border-b pb-4'>
                <h1 className='text-5xl leading-none font-semibold text-white'>
                  CityChange forslag
                </h1>
              </div>
              <div className='flex flex-col gap-3 pt-4 pb-8 font-medium text-[#DFE4F0] md:max-w-[528px]'>
                <p>
                  CityChange er Magasinet KBHs søsterprojekt, hvor du kan stille
                  forslag, anmelde byrum og meget mere.
                </p>
                <p>
                  Det hele foregår i app&apos;en, der kan downloades til både{' '}
                  <Link
                    href='#'
                    target='_blank'
                    rel='noopener noreferrer'
                    className='underline'
                  >
                    iOS
                  </Link>{' '}
                  og{' '}
                  <Link
                    href='#'
                    target='_blank'
                    rel='noopener noreferrer'
                    className='underline'
                  >
                    Android
                  </Link>
                  . Klik på forslagene her på siden for at gå direkte til dem i
                  app&apos;en — eller læs mere på{' '}
                  <Link
                    href='#'
                    target='_blank'
                    rel='noopener noreferrer'
                    className='underline'
                  >
                    citychange.app
                  </Link>
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className='relative mx-auto w-full max-w-[1362px] grow xl:px-8'>
        <div className='flex flex-col gap-y-3 xl:flex-row'>
          <div className='w-full xl:ml-68'>
            <HydrationBoundary state={helpers.dehydrate()}>
              <CityChangeList filters={filters} />
            </HydrationBoundary>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
}