import React, { useRef } from "react";
import NewsCard from "@/components/news/NewsCard";
import Link from "next/link";

const SCROLL_AMOUNT = 340; // px, ширина одной карточки + отступ

const NewsAndPromos = () => {
  const scrollRef = useRef<HTMLDivElement>(null);

  const scrollLeft = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollBy({ left: -SCROLL_AMOUNT, behavior: 'smooth' });
    }
  };
  const scrollRight = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollBy({ left: SCROLL_AMOUNT, behavior: 'smooth' });
    }
  };

  return (
    <section className="main">
      <div className="w-layout-blockcontainer container w-container">
        <div className="w-layout-vflex news-index-block">
          <div className="w-layout-hflex flex-block-31">
            <h2 className="heading-4">Новости и акции</h2>
            <div className="w-layout-hflex flex-block-29">
              <Link href="/news" className="text-block-18" style={{display: 'flex', alignItems: 'center'}}>
                Ко всем новостям
                <img src="/images/Arrow_right.svg" loading="lazy" alt="" style={{marginLeft: 8}} />
              </Link>
            </div>
          </div>
          <div className="carousel-row">
            <button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
                <path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            <div className="w-layout-hflex flex-block-6-copy-copy carousel-scroll" ref={scrollRef}>
              <NewsCard
                title="Kia Syros будет выделяться необычным стилем"
                description="Компания Kia готова представить новый кроссовер Syros"
                category="Новости компании"
                date="17.12.2024"
                image="/images/news_img.png"
              />
              <NewsCard
                title="Kia Syros будет выделяться необычным стилем"
                description="Компания Kia готова представить новый кроссовер Syros"
                category="Новости компании"
                date="17.12.2024"
                image="/images/news_img.png"
              />
              <NewsCard
                title="Kia Syros будет выделяться необычным стилем"
                description="Компания Kia готова представить новый кроссовер Syros"
                category="Новости компании"
                date="17.12.2024"
                image="/images/news_img.png"
              />
              <NewsCard
                title="Kia Syros будет выделяться необычным стилем"
                description="Компания Kia готова представить новый кроссовер Syros"
                category="Новости компании"
                date="17.12.2024"
                image="/images/news_img.png"
              />
            </div>
            <button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
                <path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default NewsAndPromos;