"use client"
import React  from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide, } from 'swiper/react'; 
import { Autoplay  } from 'swiper/modules';
 
import CategoryItem, { CategoryModel } from './CategoryItem'; 
type AltComponentProps = {
    inputRef: React.RefObject<any>;
};
 

const CategorySlider: React.FC<AltComponentProps> = ({ inputRef }) => { 

    const categories:CategoryModel[] = [
        
       /* {
            title: 'Endüstri 4.0',
            content: 'Endüstri 4.0 çözümleriyle üretimde devrim yaratın ve verimliliği artırın.',
            link: '/',
            image: '/anasayfa_sektor_iot.png'
        }, */
        {
            title: 'Otomotiv',
            content: 'Verimlilik ve güvenlik için akıllı çözümler.',
            link: '/cozumler/otomotiv',
            image: '/anasayfa_sektor_otomotiv.png'
        },
        {
            title: 'Gıda Endüstrisi ',
            content: 'Verimli ve hijyenik gıda üretim ve paketleme çözümleri.',
            link: '/cozumler/gida',
            image: '/anasayfa_sektor_gida.png'
        },
       
        {
            title: 'Test Teknolojileri',
            content: 'Doğru ve güvenilir test çözümleri.',
            link: '/cozumler/test',
            image: '/anasayfa_sektor_test.png'
        },
        
        {
            title: 'Baskı',
            content: 'Hızlı ve kaliteli baskı çözümleri.',
            link: '/cozumler/baski',
            image: '/anasayfa_sektor_baski.png'
        },
         
        {
            title: 'Geri Dönüşüm',
            content: 'Sürdürülebilir geri dönüşüm çözümleri.',
            link: '/cozumler/geridonusum',
            image: '/anasayfa_sektor_geridonusum.png'
        },
    ]
  
    return (
        <div className='overflow-hidden px-4    '>

            <Swiper
                 className="  homeproductsilder mt-12"
                onSwiper={(swiper) => { inputRef.current = swiper }}
                 
                centeredSlides={false} // Ortalamayı devre dışı bırak
                
                slidesPerView={'auto'}
                spaceBetween={30}
                pagination={{
                    clickable: true,
                }}
                modules={[Autoplay]} 
                breakpoints={ {
                    1920 : {
                        slidesOffsetBefore : 100
                    },
                    2100 : {
                        slidesOffsetBefore : 400
                    }
                }}
               
            >
                 
                <SwiperSlide>
                    <div className='w-full  lg:w-[380px]   px-3 h-[480px] leading-8  '> 
                    Geliştirdiğimiz endüstriyel çözümlerle, her sektördeki iş süreçlerini optimize ediyor ve verimliliği artırıyoruz. Endüstri 4.0 teknolojilerinden, otomotiv üretimi ve gıda sektörüne kadar geniş bir yelpazede projeler sunuyoruz. Her projede, en son teknoloji ürünler ve sistemlerle, işletmenizin karşılaştığı zorlukları çözüyor ve sürdürülebilir çözümler sağlıyoruz. İster ekstrüzyon, ister test teknolojileri veya baskı endüstrisi olsun, her alanda en iyi çözüm için birlikte çalışıyoruz. 

                    </div>
                </SwiperSlide>

                {

                    categories.map((item, index) => (
                        <SwiperSlide key={index}>
                            <CategoryItem  {...item} />
                        </SwiperSlide>

                    ))

                } 

            </Swiper>
        </div>
    )
}

export default CategorySlider;