---
import { Image } from 'astro:assets';
import Star from '../../assets/svg/star.svg';
import { getReviewsCourse } from '../../libs/reviews';

type Props = {
  course_id: any;
};

const { course_id }: Props = Astro.props;
const reviews = getReviewsCourse(course_id);

const getDate = (date: string) => {
  const options: object = { year: 'numeric', month: 'long', day: 'numeric' };
  return new Date(date).toLocaleDateString('es', options);
};

const getStars = (rating: number) => {
  let stars = [];
  for (let i = 0; i < rating; i++) {
    stars.push('');
  }
  return stars;
};

const getOverallRating = (reviews: any) => {
  let total = 0;
  reviews.forEach((review: any) => {
    total += review.stars;
  });
  return total / reviews.length;
};
---
<hr class="my-7" />
<h3 class="mb-4 text-white">Comentarios de los Estudiantes</h3>
<div class="row mb-5">
  <div class="col-lg-4">
    <div class="card card-sm bg-secondary text-center mb-3">
      <div class="card-body">
        <span class="display-4 text-white">{getOverallRating(reviews)}</span>
        <div class="d-flex justify-content-center gap-2 mb-2">
          { getStars(getOverallRating(reviews)).map((star: any) => (
            <Image src={Star} alt="Review rating" width="16" />
          ))}
        </div>
        <span class="text-white">Calificación del curso</span>
      </div>
    </div>
  </div>
  <div class="col-lg-8">
    <div class="d-grid gap-2"></div>
  </div>
</div>
<div class="border-bottom pb-4 mb-4">
  <div class="row align-items-center">
    <div class="mb-2 mb-sm-0">
      <h3 class="mb-0 text-white">Reseñas</h3>
    </div>
  </div>
</div>
<ul class="list-comment list-comment-divider mb-7">
  {
    reviews.map((review:any)=>(
            <li class="bg-secondary list-comment-item">
              <div class="d-flex gap-1 mb-3">
                { getStars(review.stars).map((star: any) => (
                  <Image src={Star} alt="Review rating" width="16" />
                ))}
              </div>
              <div class="d-flex align-items-center mb-3">
                <div class="flex-shrink-0">
                  <Image
                      class="avatar avatar-sm avatar-circle"
                      src={`${import.meta.env.ASTRO_ASSETS}/${review.user_created.avatar}`}
                      alt={`${review.user_created.avatar} Avatar`}
                      width={50}
                      height={50}
                    />
                </div>

                <div class="flex-grow-1 ms-3">
                  <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 text-white">{`${review.user_created.first_name} ${review.user_created.last_name}`}</h5>
                    <span class="text-white d-block small text-muted">{getDate(review.date_created)}</span>
                  </div>
                </div>
              </div>
              <div>
                <p class="text-white">{review.feedback}</p>
              </div>
            </li>
    ))
  }
</ul>
<hr class="my-7" />