import ReviwsMainItem from './reviews-main-item';
import { Separator } from '@/components/ui/separator';
import { ArticleList } from '@/features/posts/_lib/transformers';

type ReviewsProps = {
  reviews: ArticleList;
  title: string;
};

export default function RevewsMainBlock({ reviews, title }: ReviewsProps) {
  if (!reviews.length) return;
  return (
    <section className='mx-auto w-full max-w-[1362px] grow p-3 md:px-8 md:py-3 xl:border-x'>
      <Separator className='mb-4' />
      <div className='flex flex-col xl:flex-row'>
        <div className='w-68 shrink-0'>
          <h2 className='mb-4 text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
            {title}
          </h2>
        </div>
        <div className='w-full'>
          <ul className='grid grid-cols-1 gap-5 md:grid-cols-2'>
            {reviews.map((item, index) => (
              <li key={index}>
                <ReviwsMainItem data={item} />
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}