'use client'
import { ComponentCommentOne, Maybe } from "@/types/gpl/graphql";
import styles from "./index.module.scss";
import Image from "@/modules/common/components/image";
import Button from "@/modules/common/components/button/border";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import 'swiper/css/navigation';
import "swiper/css/pagination";
interface Props {
  param: Maybe<ComponentCommentOne> | undefined;
}

export default async function SloganOne({ param }: Props) {

  return (
         <div className={styles.container}>
        <div className={styles.content}>
           <Swiper
              className={styles.oneSwiper}
              spaceBetween={30}
              modules={[Navigation, Pagination]}
               navigation={true}
              pagination={{
                clickable: true,
              }}
           >
              {
                  param?.list?.map((item,index) => (
                     <SwiperSlide key={index} className={styles.slide}>
                        <div className={styles.item}>
                           <div className={styles.title}>{item?.title}</div>
                           <div className={styles.grade}>
                              {Array.from({ length: item?.grade! }, (_, num )=>{
                                 return <div key={num} className={styles.yes}>
                                    <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11.952 5.38005L9.48556 7.53255L10.2244 10.7372C10.2635 10.9048 10.2523 11.0801 10.1923 11.2413C10.1323 11.4026 10.0261 11.5425 9.88697 11.6437C9.74784 11.7449 9.58198 11.8028 9.4101 11.8103C9.23823 11.8177 9.06798 11.7743 8.92064 11.6855L6.12556 9.9902L3.3365 11.6855C3.18915 11.7743 3.0189 11.8177 2.84703 11.8103C2.67516 11.8028 2.50929 11.7449 2.37017 11.6437C2.23104 11.5425 2.12483 11.4026 2.06482 11.2413C2.00481 11.0801 1.99365 10.9048 2.03275 10.7372L2.77048 7.53583L0.303528 5.38005C0.173048 5.26751 0.0786977 5.11896 0.0323084 4.95302C-0.014081 4.78708 -0.0104443 4.61113 0.0427624 4.44725C0.0959692 4.28336 0.196377 4.13884 0.331396 4.03179C0.466414 3.92474 0.630032 3.85994 0.801731 3.84552L4.05345 3.56388L5.32275 0.536375C5.38903 0.377517 5.50084 0.241822 5.64408 0.146376C5.78733 0.0509294 5.95561 0 6.12775 0C6.29988 0 6.46816 0.0509294 6.61141 0.146376C6.75466 0.241822 6.86646 0.377517 6.93275 0.536375L8.20587 3.56388L11.4565 3.84552C11.6282 3.85994 11.7918 3.92474 11.9268 4.03179C12.0618 4.13884 12.1623 4.28336 12.2155 4.44725C12.2687 4.61113 12.2723 4.78708 12.2259 4.95302C12.1795 5.11896 12.0852 5.26751 11.9547 5.38005H11.952Z" fill="#FCC402"/>
                                    </svg>
                                 </div>
                              })}
                              {Array.from({ length:5-item?.grade! }, (_, num )=>{
                                 return <div key={num} className={styles.yes}>
                                    <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11.952 5.38005L9.48556 7.53255L10.2244 10.7372C10.2635 10.9048 10.2523 11.0801 10.1923 11.2413C10.1323 11.4026 10.0261 11.5425 9.88697 11.6437C9.74784 11.7449 9.58198 11.8028 9.4101 11.8103C9.23823 11.8177 9.06798 11.7743 8.92064 11.6855L6.12556 9.9902L3.3365 11.6855C3.18915 11.7743 3.0189 11.8177 2.84703 11.8103C2.67516 11.8028 2.50929 11.7449 2.37017 11.6437C2.23104 11.5425 2.12483 11.4026 2.06482 11.2413C2.00481 11.0801 1.99365 10.9048 2.03275 10.7372L2.77048 7.53583L0.303528 5.38005C0.173048 5.26751 0.0786977 5.11896 0.0323084 4.95302C-0.014081 4.78708 -0.0104443 4.61113 0.0427624 4.44725C0.0959692 4.28336 0.196377 4.13884 0.331396 4.03179C0.466414 3.92474 0.630032 3.85994 0.801731 3.84552L4.05345 3.56388L5.32275 0.536375C5.38903 0.377517 5.50084 0.241822 5.64408 0.146376C5.78733 0.0509294 5.95561 0 6.12775 0C6.29988 0 6.46816 0.0509294 6.61141 0.146376C6.75466 0.241822 6.86646 0.377517 6.93275 0.536375L8.20587 3.56388L11.4565 3.84552C11.6282 3.85994 11.7918 3.92474 11.9268 4.03179C12.0618 4.13884 12.1623 4.28336 12.2155 4.44725C12.2687 4.61113 12.2723 4.78708 12.2259 4.95302C12.1795 5.11896 12.0852 5.26751 11.9547 5.38005H11.952Z" fill="#ebebeb"/>
                                    </svg>
                                 </div>
                              })}
                           </div>
                           <div className={styles.desc}>{item?.desc}</div>
                           <div className={styles.name}>{item?.name}</div>

                        </div>

                     </SwiperSlide>
                  ))
              }
           </Swiper>
        </div>
     </div>
  );
}

.container {
  padding: 50px 20px;

  .content {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;

    .oneSwiper {
      width: 100%;
      height: 524px;
      margin-top: 40px;

      :global(.swiper-button-prev) {
        color: #262626;
        width: 20px;
        height: 20px;
        left: 50px;
        top: 50%;
        transform: translateY(50%);
        display: none;

        @include md {
          display: block;
        }
      }

      :global(.swiper-button-next) {
        color: #262626;
        width: 20px;
        height: 20px;
        right: 50px;
        top: 50%;
        transform: translateY(50%);
        display: none;

        @include md {
          display: block;
        }
      }

      :global(.swiper-pagination-bullet-active) {
        background-color: #262626;
      }

      .item {
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;



        .title {
          text-align: center;
          font-size: 48px;
          font-weight: 400;
          color: #262626;
          line-height: 50px;
          letter-spacing: 0.64px;
          margin-bottom: 30px;
        }

        .grade {
          display: flex;
          gap: 5px;
          align-items: center;
          margin-bottom: 30px;
        }

        .desc {
          text-align: center;
          font-size: 24px;
          font-weight: 400;
          color: #262626;
          line-height: 33.2px;
          letter-spacing: 0px;
          margin-bottom: 50px;
          max-width: 600px;
        }

        .name {
          font-size: 14px;
          font-weight: 400;
          color: #262626;
          line-height: 20px;
          letter-spacing: 1.4px;
        }
      }
    }
  }
}