カルーセル / スライダー（Carousel / Slider）

'use client';
import { Carousel } from 'antd';
import { ConfigProvider } from 'antd';

const slides = [
  { color: '#4f46e5', label: 'Slide 1' },
  { color: '#0891b2', label: 'Slide 2' },
  { color: '#16a34a', label: 'Slide 3' },
  { color: '#dc2626', label: 'Slide 4' },
];

export function AntCarouselDemo() {
  return (
    <ConfigProvider>
      {/* 基本カルーセル（自動再生・矢印・ドット） */}
      <Carousel autoplay autoplaySpeed={3000} dots arrows loop>
        {slides.map(s => (
          <div key={s.label}>
            <div style={{ background: s.color, height: 220 }}
              className="flex items-center justify-center text-white text-2xl font-bold">
              {s.label}
            </div>
          </div>
        ))}
      </Carousel>

      {/* フェードトランジション */}
      <Carousel autoplay effect="fade" autoplaySpeed={2500} dots>
        {slides.map(s => (
          <div key={s.label}>
            <div style={{ background: s.color, height: 180 }}
              className="flex items-center justify-center text-white text-2xl font-bold">
              {s.label}
            </div>
          </div>
        ))}
      </Carousel>

      {/* 複数アイテム表示 */}
      <Carousel slidesToShow={3} slidesToScroll={1} autoplay dots arrows>
        {slides.map(s => (
          <div key={s.label} className="px-1">
            <div style={{ background: s.color, height: 140 }}
              className="flex items-center justify-center text-white font-bold rounded-lg">
              {s.label}
            </div>
          </div>
        ))}
      </Carousel>
    </ConfigProvider>
  );
}