"use client"

import { ILocalArticle, INetWorkNewsArticle } from "@/type/News"
import CardItemNews from "./ItemNews"
import { useRecoilValue } from "recoil"
import { typeNewsState } from "@/recoil/news"

type IProps = {
  dataSources: any
  onRefect: () => void
  onEditPost: (post: any) => void
}

const ListNews = ({ dataSources, onRefect, onEditPost }: IProps) => {
  const optionHeader = useRecoilValue(typeNewsState)

  return (
    <div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 px-5 py-6">
      {optionHeader === "network"
        ? dataSources.map((item: INetWorkNewsArticle, index: number) => (
            <CardItemNews
              key={index}
              keyProps={index}
              url={item?.url}
              url_image={item?.image_url}
              alt_image={item?.title}
              title={item?.title}
              decs={item?.description}
              className="col-span-1"
              createdAt={item?.published_at}
              author={item?.author}
              target={item?.url ? "_blank" : "_self"}
              is_favourite={false}
              showMark={false}
            />
          ))
        : optionHeader === "my_post"
          ? dataSources?.map((item: ILocalArticle, index: number) => (
              <CardItemNews
                key={index}
                keyProps={item?.id}
                url={`/news/${item?.id}`}
                url_image={item?.thumbnail}
                alt_image={item?.title}
                title={item?.title}
                decs={item?.content}
                className="col-span-1"
                createdAt={Number(item?.created)}
                author={item?.userid}
                target="_self"
                showMark={true}
                is_favourite={item?.is_favourite || false}
                isButtonTopRight
                item={item}
                onRefect={onRefect}
                onEditPost={onEditPost}
              />
            ))
          : dataSources?.map((item: ILocalArticle, index: number) => (
              <CardItemNews
                key={index}
                keyProps={item?.id}
                url={`/news/${item?.id}`}
                url_image={item?.thumbnail}
                alt_image={item?.title}
                title={item?.title}
                decs={item?.content}
                className="col-span-1"
                createdAt={Number(item?.created)}
                author={item?.userid}
                target="_self"
                showMark={true}
                is_favourite={item?.is_favourite || false}
              />
            ))}
    </div>
  )
}

export default ListNews