Interactive Image Selector

"use client";

import InteractiveImageSelector, {
  type ImageData,
} from "@/components/ui/interactive-image-selector";
import { useEffect, useState } from "react";

const demoImages: ImageData[] = [
  {
    id: 1,
    src: "https://ik.imagekit.io/16u211libb/smoothui/womanorange.webp?tr=w-400,h-400,q-80,f-auto",
  },
  {
    id: 2,
    src: "https://ik.imagekit.io/16u211libb/smoothui/girl-nature.webp?tr=w-400,h-400,q-80,f-auto",
  },
  {
    id: 3,
    src: "https://ik.imagekit.io/16u211libb/smoothui/metrowoman.webp?tr=w-400,h-400,q-80,f-auto",
  },
  {
    id: 4,
    src: "https://ik.imagekit.io/16u211libb/smoothui/designerworking.webp?tr=w-400,h-400,q-80,f-auto",
  },
  {
    id: 5,
    src: "https://ik.imagekit.io/16u211libb/smoothui/girlglass.webp?tr=w-400,h-400,q-80,f-auto",
  },
  {
    id: 6,
    src: "https://ik.imagekit.io/16u211libb/smoothui/manup.webp?tr=w-400,h-400,q-80,f-auto",
  },
];

const InteractiveImageSelectorDemo = () => {
  const [selected, setSelected] = useState<number[]>([]);
  const [images, setImages] = useState<ImageData[]>(demoImages);
  const [notification, setNotification] = useState<string | null>(null);

  useEffect(() => {
    if (notification) {
      const timer = setTimeout(() => setNotification(null), 3000);
      return () => clearTimeout(timer);
    }
  }, [notification]);

  return (
    <div className="relative flex h-[520px] w-full items-stretch justify-center bg-background p-4">
      {notification && (
        <div className="absolute top-4 right-4 z-50 rounded-lg border bg-background px-4 py-2 text-sm text-foreground shadow-lg">
          {notification}
        </div>
      )}
      <InteractiveImageSelector
        images={images}
        onChange={setSelected}
        onDelete={(deleted) =>
          setImages((imgs) => imgs.filter((img) => !deleted.includes(img.id)))
        }
        onShare={(sharedImages) =>
          setNotification(`Share images: ${sharedImages.join(", ")}`)
        }
        selectable={false}
        selectedImages={selected}
      />
    </div>
  );
};

export default InteractiveImageSelectorDemo;