import { ComponentSloganThree, Maybe } from "@/types/gpl/graphql";
import s from "./index.module.scss";
import { getTranslations } from "next-intl/server";
interface Props {
  param: Maybe<ComponentSloganThree> | undefined;
}

export default async function SloganThree({ 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.title}>{param?.title}</div>
          <p className={s.desc}>{param?.desc}</p>
        </div>
        <div className={s.right}>
          <div className={s.list}>
            {param?.list?.map((item, index) => {
              return (
                <div className={s.item} key={index}>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-layout-grid preview-icon"
                  >
                    <rect width="7" height="7" x="3" y="3" rx="1" />
                    <rect width="7" height="7" x="14" y="3" rx="1" />
                    <rect width="7" height="7" x="14" y="14" rx="1" />
                    <rect width="7" height="7" x="3" y="14" rx="1" />
                  </svg>
                  <span className={s.itemDesc}>{item?.text}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

.container {
  width: 100%;
  padding: 80px 20px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;

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

    @include lg {
      flex-direction: row;
    }

    .left {

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

      .desc {
        font-size: var(--font-lg);
        color: #ffffffd9;
        max-width: 600px;
        
      }
    }

    .right {

      .list {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
        .item {
          display: flex;
          align-items: center;
          gap: 20px;
         
         

          @include md {}

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

          svg{
            color: #fff;
          }

        }
      }
    }




  }
}