import React, { useState } from 'react';
import { Swiper, SwiperItem, View, Text } from '@ray-js/ray';

export default function BasicSwiperItem() {
  const [current, setCurrent] = useState(0);
  const colors = ['#1890ff', '#52c41a', '#faad14'];

  return (
    <Swiper
      style={{ width: '702rpx', height: '200rpx' }}
      autoplay
      interval={2500}
      dots
      current={current}
      onChange={(e) => setCurrent(e.current)}
    >
      {colors.map((color, index) => (
        <SwiperItem key={index}>
          <View
            style={{
              width: '100%',
              height: '100%',
              backgroundColor: color,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Text style={{ color: '#fff' }}>Page {index + 1}</Text>
          </View>
        </SwiperItem>
      ))}
    </Swiper>
  );
}