import { Rating } from '../../gql'
import { useState } from 'react'

const RatingItem = ({ rating }: { rating: Rating }) => {
  return (
    <li>
      {rating.comment} {rating.value} {rating.user.name}
    </li>
  )
}

const Ratings = ({ ratings, className }: { ratings?: Rating[]; className?: string }) => {
  const [show, setShow] = useState(false)
  return (
    <div className={className}>
      <h2>
        Ratings <span onClick={() => setShow(!show)}>({ratings?.length ?? 0})</span>
      </h2>
      {show &&
        (ratings ? (
          <ul>
            {ratings.map((rating) => (
              <RatingItem key={rating.id} rating={rating} />
            ))}
          </ul>
        ) : (
          <p>No ratings found</p>
        ))}
    </div>
  )
}

export default Ratings
