import React, { useState } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper.min.css'
import Image from '@/core/components/elements/Image/Image'
import useDevice from '@/core/hooks/useDevice'

const HomePage = () => {
  const [activeTab, setActiveTab] = useState('Tab 1')

  const { isMobile, isDesktop } = useDevice()
  const handleTabClick = (label) => {
    setActiveTab(label)
  }

  const tabItems = [
    { label: 'Tab 1', content: 'Content for Tab 1' },
    { label: 'Tab 2', content: 'Content for Tab 2' },
    { label: 'Tab 3', content: 'Content for Tab 3' },
    { label: 'Tab 4', content: 'Content for Tab 4' },
    { label: 'Tab 5', content: 'Content for Tab 5' },
    { label: 'Tab 6', content: 'Content for Tab 6' },
    { label: 'Tab 7', content: 'Content for Tab 7' },
    { label: 'Tab 8', content: 'Content for Tab 8' },
    { label: 'Tab 9', content: 'Content for Tab 9' },
    { label: 'Tab 10', content: 'Content for Tab 10' }
  ]

  return (
    <div className='px-4 sm:px-0'>
      <div className='flex justify-between items-center mb-4'>
        <div className='font-medium sm:text-h-lg'>{activeTab}</div>
      </div>
      <Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 20}>
        {tabItems.map((item, index) => (
          <SwiperSlide key={index}>
            <button
              className={`py-1 px-2 rounded border flex justify-center items-center h-30 ${
                activeTab === item.label ? 'border-red-500' : 'border-gray_r-6'
              }`}
              onClick={() => handleTabClick(item.label)}
            >
              {' '}
              <Image
                src='https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/10'
                alt=''
                className='h-full w-full object-contain object-center'
              />
            </button>
          </SwiperSlide>
        ))}
      </Swiper>

      <div className='mt-4'>
        {tabItems.map((item, index) => (
          <div
            key={index}
            className={`${
              activeTab === item.label ? 'block' : 'hidden'
            } bg-gray-100 p-4 rounded-md`}
          >
            {item.content}
          </div>
        ))}
      </div>
    </div>
  )
}

export default HomePage