"use client"
import {useState} from "react";
import { ComponentCaseThree, Maybe } from "@/types/gpl/graphql";
import s from "./index.module.scss";
import {Link} from "@/lib/i18n/navigation";
import Image from "@/modules/common/components/image";
import Button from "@/modules/common/components/button/border";
interface Props {
  param: Maybe<ComponentCaseThree> | undefined;
}

export default function SloganOne({ param }: Props) {
   const [currentIndex, setCurrentIndex] = useState(0);
  return (
    <div className={`${s.container}`}>
          {
            param?.list?.map((item, index) => {
              return (
                 <div style={{ backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url(${item?.back?.url})` }} className={`${s.bg} ${index === currentIndex ? s.a : ""}`} key={index}>
                </div>
              );
            })
          }
        <div className={s.content}>
        <div className={s.left}>
          <div className={s.title}>{param?.title}</div>
          <div className={s.desc}>{param?.desc}</div>
        </div>
        <div className={s.right}>
          <div className={s.list}>
          {
            param?.list?.map((item, index) => {
              return (
                 <div onMouseEnter={() => setCurrentIndex(index)} className={s.item} key={index}>
                    <div className={s.imgBox}>
                        <Image image={item?.img} />
                    </div>
                    <span className={s.itemDesc}>{item?.title}</span>
                    <div className={s.box}>{item?.title}</div>
                </div>
              );
            })
          }
          </div>
        </div>
      </div>
    </div>
  );
}

.container {
  width: 100%;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  .a {
    opacity: 1;
  }



  .content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    justify-content: space-between;
    gap: 50px;

    @include lg {
      flex-direction: row;
    }

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 360px;
      gap: 20px;

      .title {
        color: #fff;
        font-size: var(--font-3xl);
        font-weight: 800;
        margin-bottom: 10px;
      }

      .desc {
        font-size: var(--font-lg);
        color: #ffffffd9;
        text-align: justify;
        max-width: 600px;
        line-height: 28px;
      }
    }

    .right {

      // max-width: 660px;
      @include lg {
        max-width: 660px;
      }

      .list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

        @include md {
          grid-template-columns: repeat(4, 1fr);
        }

        .item {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 20px;
          padding: 10px;
          text-align: center;
          border: solid 1px #ffffff59;
          border-radius: 10px;
          cursor: pointer;
          transition: all 0.2s ease-in-out;

          @include md {}

          &:hover {
            .box {
              opacity: 1;
            }
          }

          .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--primary-color);
            border-radius: 10px;
            z-index: 10;
            opacity: 0;
            transition: all 0.2s ease-in-out;
            color: #fff;
            font-size: var(--font-lg);
            line-height: 36px;
            padding: 20px;
          }

          .imgBox {
            width: 50px;
            aspect-ratio: 1 / 1;
          }

          .itemDesc {
            color: #fff;
            font-size: var(--font-lg);
            line-height: 36px;
          }

        }
      }
    }




  }
}