import { ComponentCaseFour, Maybe } from "@/types/gpl/graphql";
import Image from "@/modules/common/components/image";
import s from "./index.module.scss";
import {Link} from "@/lib/i18n/navigation";
interface Props {
  param: Maybe<ComponentCaseFour> | undefined;
}

export default async function CaseFour({ param }: Props) {
  return (
    <div className={s.container}>
      <div className={s.content}>
        <div className={s.list}>
          {
            param?.list?.map((item, index) => (
              <div key={index} className={s.item}>
                <div className={s.imgBox}>
                  <Image image={item?.cover} />
                </div>
                <Link href={`/case/${item?.slug}`} className={s.link}>
                </Link>
                  <div className={s.title}>
                    {item?.title}
                  </div>
              </div>
            ))
          }
        </div>
      </div>
    </div>
  );
}

.container {
  width: 100%;
  padding: 80px 20px;

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

    .list {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      min-height: 800px;

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

      .item {
        position: relative;

        &:last-child {
          grid-column: span 2;
        }

        .imgBox {
          width: 100%;
          height: 100%;
        }

        .link {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 100%);
          z-index: 1;
          transition: all 0.3s ease-in-out;
          opacity: 1;

          &:hover {
            opacity: 0;
          }
        }

        .title {
          padding: 30px;
          position: absolute;
          bottom: 0;
          left: 0;
          font-size: 20px;
          font-weight: 400;
          color: #fff;
          z-index: 2;
        }
      }
    }
  }
}