import { NewsItem } from "@/interface/post";
import TimeBefore from "@/ui/TimeBefore";
import Image from "next/image";
import Link from "next/link";
import Marquee from "react-fast-marquee";

type TopBreakingProps = {
  title: string;
  background_color: string;
  post: NewsItem[];
};

const HotNews = ({ data }: { data: TopBreakingProps }) => {
  const { background_color, post, title } = data || {};

  return (
    <section
      className="py-1 md:py-1 flex justify-center my-3 md:mx-[20px] lg:mx-[21px] xl:mx-[100px]"
    // style={{ backgroundColor: "red" }}
    >
      <div className="container px-4 mx-auto">
        <div className="flex w-full">
          {/* Breaking News Label /} */}
          <div className="bg-[#A32020] w-[190px] flex items-center justify-center text-center text-[11px] sm:text-11px] md:text-[12px] lg:text-[13px] xl:text-[15px] text-white px-4 py-3 font-bold">
            Breaking News :
          </div>
          <Marquee
            speed={100}
            gradient={false}
            pauseOnHover={true}
            delay={3}>
            {post?.slice(0, 3)?.map((item, index) => {
              const {
                category,
                encode_titl,
                post_title
              } = item || {};
              return (
                <div
                  className="bg-[#F5F5F5] dark:bg-gray-800 px-6 py-3 text-[18.79px] whitespace-nowrap"
                  key={index} >
                  <Link
                    href={`/${category.toLowerCase()}/${encode_titl}`}
                    className=" text-black dark:text-white drop-shadow-xl  mx-[100px] "
                  >
                    {post_title}
                  </Link>
                </div>
              )

            })}
          </Marquee>
        </div>

      </div>
    </section>
  );
};

export default HotNews;

{/* <div className="grid grid-cols-1 md:grid-cols-12 gap-6 border-b-[1px] border-slate-500 pb-1">
          {post?.map((itm) => {
            const {
              news_id,
              category,
              encode_titl,
              post_title,
              image_thumb,
              post_date,
            } = itm || {};

            return (
              <div
                key={news_id}
                className="col-span-12 md:col-span-6 lg:col-span-4"
              >
                <Link
                  className="group"
                  href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
                >
                  <div className="w-[124px] h-auto lg:w-[130px] lg:h-[95px] mr-3 mb-2 overflow-hidden float-left relative">
                    <div>
                      <Image
                        alt={post_title}
                        width={160}
                        height={90}
                        decoding="async"
                        className="w-[124px] h-auto lg:w-[130px] lg:h-[95px] object-cover group-hover:scale-105 duration-700 ease-out"
                        src={image_thumb}
                        loading="lazy"
                      />
                    </div>
                  </div>
                  <h2 className="text-[var(--dark)] dark:text-white ">
                    {post_title}
                  </h2>

                  <TimeBefore title={post_date} />
                </Link>
              </div>
            );
          })}
        </div> */}