import type { reviewsSchema } from '@/content.config'
import type { z } from 'astro:content'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import 'swiper/css/scrollbar'
import { Mousewheel, Scrollbar } from 'swiper/modules'
import StarIconSrc from '@/assets/icons/StarIcon.svg'
import { useTranslations } from '@/i18n/utils'

type Review = z.infer<ReturnType<typeof reviewsSchema>>
type ReviewsProps = {
  reviews: Review[]
  lang?: string
}

const REVIEWS_LINK =
  'https://yandex.ru/maps/213/moscow/?ll=37.469982%2C55.781185&mode=poi&poi%5Bpoint%5D=37.469074%2C55.781319&poi%5Buri%5D=ymapsbm1%3A%2F%2Forg%3Foid%3D19715751392%26yclid%3D10576664134676381695%26banner_id%3D1873406736351323707&tab=reviews&z=17.75'
const swiperSlideClassName =
  '!h-auto first:pl-0 last:pr-0 md:max-w-[600px] md:first:pl-24 md:last:pr-24'

export const Reviews: React.FC<ReviewsProps> = ({ reviews, lang }) => {
  const t = useTranslations(lang)

  return (
    <Swiper
      modules={[Scrollbar, Mousewheel]}
      slidesPerView={1}
      spaceBetween={24}
      scrollbar={{
        hide: true,
        draggable: true,
      }}
      breakpoints={{
        768: {
          slidesPerView: 'auto',
        },
      }}
    >
      {reviews.map((review, index) => (
        <SwiperSlide key={index} className={swiperSlideClassName}>
          <div className="flex h-full flex-col gap-6 bg-bg-light p-6 md:px-14 md:py-16">
            <div className="flex gap-1">
              {[...Array(5)].map((_, i) => (
                <img
                  key={i}
                  {...StarIconSrc}
                  alt="star"
                  loading="lazy"
                  className="h-5 w-5 text-yellow-400"
                />
              ))}
            </div>
            <blockquote className="break-words text-lg font-semibold text-text-light">
              {review.review}
            </blockquote>
            <div className="mt-auto flex items-center gap-4">
              <img
                {...review.author.image}
                alt={review.author.imageAlt}
                loading="lazy"
                className="h-16 w-16 rounded-full object-cover"
              />
              <div className="flex flex-col">
                <span className="font-semibold text-text-light">{review.author.name}</span>
                <span>{review.author.description}</span>
              </div>
            </div>
          </div>
        </SwiperSlide>
      ))}
      <SwiperSlide className={swiperSlideClassName}>
        <div className="h-full bg-bg-light transition-colors hover:bg-bg-light/80">
          <a
            href={REVIEWS_LINK}
            target="_blank"
            className="flex h-full w-full flex-col items-center justify-center gap-4 p-6 text-center md:px-14 md:py-16"
          >
            <span className="text-xl font-semibold text-text-light">
              {t('reviews.viewMore.title')}
            </span>
            <span>{t('reviews.viewMore.description')}</span>
            <svg
              className="mt-2 h-6 w-6 text-text-light"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
            >
              <path d="M5 12h14M12 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>
      </SwiperSlide>
    </Swiper>
  )
}