import VisionItem from '../../../../components/shared/articles/vision-item';
import { ArticleList } from '@/features/posts/_lib/transformers';

export default function VisionPopularBlock({
  yearPopular,
  allTimePopular
}: {
  yearPopular?: ArticleList;
  allTimePopular?: ArticleList;
}) {
  if (!yearPopular?.length && !allTimePopular?.length) {
    return (
      <section className='relative mx-auto w-full max-w-[1362px] grow px-3 md:px-8 xl:border-x'>
        <div className='flex flex-col gap-y-3 xl:flex-row'>
          <div className='shrink-0 xl:w-68'>
            <h2 className='text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
              populære <br /> visioner
            </h2>
          </div>
          <div className='grid w-full gap-5'>
            <p className='text-lg font-medium'>Ingen visioner fundet</p>
          </div>
        </div>
      </section>
    );
  }
  return (
    <section className='relative mx-auto w-full max-w-[1362px] grow px-3 md:px-8 xl:border-x'>
      <div className='flex flex-col gap-y-3 border-t pt-3 xl:flex-row'>
        <div className='shrink-0 xl:w-68'>
          <h2 className='text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
            populære <br />
            visioner
          </h2>
        </div>
        <div className='flex flex-col gap-5 sm:flex-row'>
          {!!yearPopular?.length && (
            <div className='relative before:absolute before:-bottom-[10px] before:h-px before:w-full before:bg-gray-200 last:before:hidden sm:before:-right-[10px] sm:before:bottom-0 sm:before:h-full sm:before:w-px'>
              <p className='mb-3 text-sm font-bold tracking-wide text-neutral-800 uppercase'>
                MEST POPULÆRE{' '}
                <span className='text-client-blue'>SENESTE ÅR</span>
              </p>
              <ul className='grid flex-1 gap-3'>
                {yearPopular.map((item, index) => (
                  <li
                    key={index}
                    className='last:[&_.border-b-client-blue]:border-0'
                  >
                    <VisionItem
                      data={item}
                      type={!index ? 'medium' : 'small'}
                    />
                  </li>
                ))}
              </ul>
            </div>
          )}
          {!!allTimePopular?.length && (
            <div className='relative before:absolute before:-bottom-[10px] before:h-px before:w-full before:bg-gray-200 last:before:hidden sm:before:-right-[10px] sm:before:bottom-0 sm:before:h-full sm:before:w-px'>
              <p className='mb-3 text-sm font-bold tracking-wide text-neutral-800 uppercase'>
                MEST POPULÆRE{' '}
                <span className='text-client-blue'>NOGENSINDE</span>
              </p>
              <ul className='grid flex-1 gap-3'>
                {allTimePopular.map((item, index) => (
                  <li
                    key={index}
                    className='last:[&_.border-b-client-blue]:border-0'
                  >
                    <VisionItem
                      data={item}
                      type={!index ? 'medium' : 'small'}
                    />
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}