import { StrapiImage } from '@/components/strapi-image'
import type { TImage } from '@/types/strapi'

export interface ISlider {
  __component: 'shared.slider'
  id: number
  files?: Array<TImage>
}

export function Slider({ files }: Readonly<ISlider>) {
  if (!files || files.length === 0) return null

  return (
    <div className="my-8">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {files.map((file, index) => (
          <figure key={file.id || index}>
            <StrapiImage
              src={file.url}
              alt={file.alternativeText || ''}
              className="rounded-lg w-full h-48 object-cover"
            />
          </figure>
        ))}
      </div>
    </div>
  )
}