import { ComponentNewOne, 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";
import { Link } from "@/lib/i18n/navigation";
interface Props {
  param: Maybe<ComponentNewOne> | undefined;
}

export default async function NewOne({ param }: Props) {
  const t = await getTranslations();
  return (
   <div className={s.contentBox}>
      <div className={s.newsWrap}>
         <div className={s.listBox}>
            {param?.list?.map((item,index)=>{
               return (
                   <div key={index} className={s.newsItem}>
   
                     <div className={s.imgBox}>
                        <Image image={item?.img} sizes="144px" />
                     </div>
   
                      <div className={s.descBox}>
                        <div className={s.title}>
                           {item?.title}
                        </div>
      
                        <div className={s.content}>
                           {item?.desc}
                        </div>
                       <Link className={s.more} href={`news/${item?.slug}`}>
                         {t('common:learnMore')}
                      <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6" data-astro-cid-i6d4wzmg="true">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                      </svg>
                       </Link>
                      </div>
                   </div>
               )
            })}
   
         </div>
      </div>
   </div>
  );
}

   .contentBox {
     background: #fff;

     .newsWrap {
       max-width: var(--max-width);
       margin: 0 auto;
       padding: 50px var(--content-padding);

       @include lg {
         padding: var(--pc-top-padding) var(--content-padding);
       }

       .listBox {
         margin: 0 auto;
         display: grid;
         gap: 14px;

         @include lg {
           grid-template-columns: 1fr 1.3fr;
           grid-template-rows: repeat(3, 1fr);
           align-items: stretch;
         }

         .newsItem {
           background: var(--back-color);
           display: flex;
           flex-direction: row;

           .imgBox {
             flex: 1;
           }

           .descBox {
             flex: 2.5;
             display: flex;
             flex-direction: column;

             .title {
               margin-bottom: 10px;
               font-size: var(--font-lg);
               /*font-weight: 500;*/
               @include line-clamp(1);
             }

             .content {
               margin-bottom: 10px;
               @include line-clamp(2);
               font-size: var(--font-base);
             }
           }

           &:first-child {
             flex-direction: column;

             @include lg {
               grid-row: 1 / 4;
             }

             .imgBox {

               aspect-ratio: 4/3;
             }

             .descBox {

               flex: 1;
               flex-direction: column;
               padding: 14px 18px 18px;

               .content {
                 margin-top: 5px;
               }

               .more {
                 padding-top: 10px;
               }
             }
           }

           &:not(:first-child) {
             flex-direction: row;
             align-items: stretch;

             .imgBox {
               height: 100%;
               width: auto;
               aspect-ratio: 1;
             }

             .descBox {
               margin: 20px 0 0 20px;

               .content {
                 white-space: pre-line;
                 line-height: 1.8;
                 padding-right: 10px;
               }
             }

           }
         }
       }

       .more {
         display: flex;
         align-items: center;
         color: var(--primary-color);
         padding: 10px 25px 10px 0;
         border-radius: 25px;
         cursor: pointer;

         svg {
           width: 15px;
           height: 15px;
           margin-left: 5px;
         }
       }
     }



   }