import { ComponentSloganTwo, Maybe } from "@/types/gpl/graphql";
import s from "./index.module.scss";
import Image from "@/modules/common/components/image";
import Button from "@/modules/common/components/button/border";
import { getTranslations } from "next-intl/server";
interface Props {
  param: Maybe<ComponentSloganTwo> | undefined;
}

export default async function SloganTwo({ param }: Props) {
  const t = await getTranslations();
  return (
    <div className={s.container} style={{ backgroundImage: `linear-gradient(180deg, #3f3f3f99 0%, #3f3f3f99 100%), url(${param?.back?.url})` }}>
      <div className={s.content}>
        <div className={s.left}>
          <div className={s.img}>
            <Image image={param?.img} fit="contain" />
          </div>
          <p className={s.desc}>{param?.desc}</p>
          <div className={s.btn}>
            <Button text={t("common:learnMore")} link="/about" />
          </div>
        </div>
        <div className={s.right}>
          <div className={s.list}>
          {
            param?.list?.map((item, index) => {
              return (
                <div className={s.item} key={index}>
                  <span className={s.itemTitle}>{item?.title}</span>
                  <span className={s.itemDesc}>{item?.desc}</span>
                </div>
              );
            })
          }
          </div>
        </div>
      </div>
    </div>
  );
}

.container {
  width: 100%;
  padding: 70px 20px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  .content {
    width: 100%;
    max-width: var(--max-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 100px;
  

    @include md {
      flex-direction: row;
    }

    .left {
      flex: 1;
      
      .img {
        display: inline-block;  
        height: 80px;;
      }

      

      .desc {
        margin-top: 20px;
        color: #fff;
        font-size: var(--font-base);
      }

      .btn {
        padding-top: 20px;
      }
    }

    .right {
      flex: 1;

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

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

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px;
          background-color: #fff3;
          border: 1px solid #fff;
          backdrop-filter: blur(1px);
          border-radius: 10px;
          text-align: center;

          @include md {}

          .itemTitle {
            font-size: var(--font-xl);
            color: #fff;
            margin-bottom: 10px;
          }

          .itemDesc {
            color: #fff;
          }

        }
      }
    }




  }
}