swiper.tsx

import { useId, Children } from 'react'
import SwiperSliderInit from '@/hooks/swiper-slider-init'
import clsx from 'clsx'
import { Icon } from '@/components/icon'
import arrowLongRightIcon from '@iconify/icons-heroicons/arrow-long-right-20-solid'
import arrowLongLeftIcon from '@iconify/icons-heroicons/arrow-long-left-20-solid'

interface SwiperProps {
  /** Child components to render inside the swiper */
  children: React.ReactNode
  /** Layout type: "slider" (default) or "carousel" */
  layout?: 'slider' | 'carousel'
  /** Text for the next button in carousel layout (default: "See More") */
  nextButtonText?: string
  /** Number of columns for carousel layout (2 or 3, default: 3) */
  columns?: 2 | 3
}

export function Swiper({
  children,