import { Component } from 'solid-js';
import { Skeleton } from "@/components/ui/skeleton";
import BaseCarousel from "@/components/ui/base-carousel";

interface ScreenshotCarouselProps {
  screenshots?: {
    url: string;
    title: string;
  }[];
  loading?: boolean;
}

const ScreenshotCarousel: Component<ScreenshotCarouselProps> = (props) => {
  const renderItem = (screenshot: NonNullable<ScreenshotCarouselProps['screenshots']>[0]) => (
    <div class="w-full h-full aspect-[16/9]">
      <img 
        src={screenshot.url} 
        alt={screenshot.title} 
        class="w-full h-full object-cover rounded-lg" 
      />
    </div>
  );

  const renderSkeleton = () => (
    <div class="w-full h-full aspect-[16/9]">
      <Skeleton class="w-full h-full rounded-lg" />
    </div>
  );

  return (
    <BaseCarousel
      items={props.screenshots}
      loading={props.loading}
      renderItem={renderItem}
      renderSkeleton={renderSkeleton}
    />
  );
};

export default ScreenshotCarousel;