import { ComponentCtaOne, 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<ComponentCtaOne> | undefined;
}

export default async function SloganOne({ param }: Props) {
  const t = await getTranslations();
  return (
    <div className={s.container} style={{ backgroundImage: `url(${param?.back?.url})` }}>
      <div className={s.content}>
        <div className={s.textContent}>
            <div className={s.title}>{param?.title}</div>
            <div className={s.desc}>{param?.desc}</div>
            <div className={s.btn}>
              <Button text={t("common:quote")} link='contact' />
            </div>
        </div>
      </div>
    </div>
  );
}

.container {
  width: 100%;
  padding: 50px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  .content {
    width: 100%;
    max-width: 800px;

    .textContent {
      background-color: rgba(0, 0, 0, 0.5);
      padding: 30px 20px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 15px;
      color: #fff;

      .title {
        text-align: center;
        font-size: 36px;
        font-weight: 500;
      }

      .desc {
        text-align: center;
        font-size: var(--font-base);
        line-height: 1.6;
        max-width: 800px;
        font-weight: 500;
        font-family: DM Sans;
      }
    }
  }
}