// src/components/CarouselDemo.tsx
import * as React from "react";
import Autoplay from "embla-carousel-autoplay";

import { Card, CardContent } from "@/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/ui/carousel";

const imageUrls = [
  "/images/carousel-1.jpg",
  "/images/carousel-2.jpg",
  "/images/carousel-3.jpg",
  "/images/carousel-4.jpg",
  "/images/carousel-5.jpg",
  "/images/carousel-6.jpg",
];

export function AutoCarouselDemo() {
  return (
    <div className="relative w-full  mx-auto overflow-hidden">
      {/* 相对定位 宽度100% 水平居中 隐藏溢出 */}
      <div className="absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-black/70 via-transparent pointer-events-none z-10" />
      <div className="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-black/70 via-transparent pointer-events-none z-10" />
      {/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */}
      <Carousel
        opts={{
          loop: true,//循环
          align: "start",
        }}
        plugins={[
          Autoplay({
            delay: 3000, // 自动播放
            stopOnInteraction: false,//不因为鼠标交互停止
          }),
        ]}
        className="w-full"
      >
        <CarouselContent className="flex gap-4">
          {imageUrls.map((src, index) => (
            <CarouselItem
              key={index}
              className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
            >
              {/* 基宽 中屏 大屏 防止收缩 相对定位 
              内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型
              隐藏溢出 移除边框 中等阴影
              弹性布局 正方形 垂直居中 水平居中 内边距0 相对
              */}
              <div
                className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
                style={{
                  transform: 'scale(1)',
                  transition: 'all 0.5s ease',
                }}
              >
                <Card className="overflow-hidden border-none shadow-lg">
                  <CardContent className="flex aspect-square items-center justify-center p-0 relative">
                    <img
                      src={src}
                      alt={`Slide ${index + 1}`}
                      className="w-full h-full object-cover"
                      loading="lazy" // 启用懒加载
                    />
                  </CardContent>
                </Card>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>

        {/* 左右箭头控制 */}
        <CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-20" />
        <CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-20" />
      </Carousel>
    </div>
  );
}