import { ArticleList } from '@/features/posts/_lib/transformers';
import ReviewItem from '../../../../components/shared/articles/review-item';
import { cn } from '@/lib/utils';

export default function RelatedReview({
  title,
  data,
  isInline = false
}: {
  title: string;
  data: ArticleList;
  isInline?: boolean;
}) {
  if (!data.length) return;
  return (
    <section className='mx-auto w-full max-w-[1362px] grow px-3 md:px-8 xl:border-x'>
      <div className='mt-4 flex flex-col border-t pt-4 xl:flex-row'>
        <div className='shrink-0 xl:w-68'>
          <h2 className='pr-8 text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
            {title}
          </h2>
        </div>
        <div className='w-full'>
          <div
            className={cn(
              'mt-5 grid gap-x-5 gap-y-10 sm:grid-cols-2 lg:gap-x-10 xl:mt-0',
              !isInline && 'lg:grid-cols-4'
            )}
          >
            {data.map((item, index) => (
              <div
                key={index}
                className='relative before:absolute before:bg-gray-200 last:before:hidden sm:before:-right-[10px] sm:before:bottom-0 sm:before:h-full sm:before:w-px sm:max-lg:nth-[2n]:before:hidden lg:before:-right-[20px] lg:nth-[4n]:before:hidden'
              >
                <ReviewItem
                  data={item}
                  variant={isInline ? 'medium-inline' : 'default'}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}