---
import prismaClient from 'utils/prisma-client'
import { Icon } from 'astro-icon/components'

import SidebarSection from './SidebarSection.astro'
import Looper from './CommentCarousel/Looper'

const comments = await prismaClient.comments.findMany({
  select: { text: true, album: { select: { id: true, title: true } } },
  orderBy: { createdAt: 'desc' },
  take: 5
})
---

<SidebarSection>
  <Looper comments={comments} client:only='react'>
    <Icon name='arrow-right' slot='arrowLeft' class='scale-x-[-1]' height={30} width={15} />
    <Icon name='arrow-right' slot='arrowRight' height={30} width={15} />
  </Looper>
</SidebarSection>