import React from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import {
  AtlantisOverlayProvider,
  ThumbnailList,
} from "@jobber/components-native";
import type { ThumbnailListProps } from "@jobber/components-native";

const files = [
  {
    contentType: "image/png",
    fileName: "image.png",
    thumbnailUrl: "https://picsum.photos/250",
    url: "https://picsum.photos/250",
    fileSize: 1024,
  },
  {
    contentType: "image/png",
    fileName: "atlantis.png",
    thumbnailUrl: "https://picsum.photos/250",
    url: "https://picsum.photos/250",
    fileSize: 1024,
  },
  {
    contentType: "image/png",
    fileName: "components.png",
    thumbnailUrl: "https://picsum.photos/250",
    url: "https://picsum.photos/250",
    fileSize: 1024,
  },
  {
    contentType: "image/png",
    fileName: "storybook.png",
    thumbnailUrl: "https://picsum.photos/250",
    url: "https://picsum.photos/250",
    fileSize: 1024,
  },
  {
    contentType: "image/png",
    fileName: "storybook2.png",
    thumbnailUrl: "https://picsum.photos/250",
    url: "https://picsum.photos/250",
    fileSize: 1024,
  },
  {
    contentType: "image/png",
    fileName: "components2.png",
    thumbnailUrl: "https://picsum.photos/250",
    url: "https://picsum.photos/250",
    fileSize: 1024,
  },
];

export function ThumbnailListBasic(props: Partial<ThumbnailListProps>) {
  return (
    <SafeAreaProvider>
      <AtlantisOverlayProvider>
        <ThumbnailList files={files} rowCount={2} {...props} />
      </AtlantisOverlayProvider>
    </SafeAreaProvider>
  );
}