components/chat/ImageList.tsx

import React from 'react';
import useImageUpload from '../../lib/hooks/useImageUpload';
import { useAtomValue } from 'jotai';
import { datasetAtom } from '../../state';
import Image from 'next/image';

export interface ImageListProps {}

const ImageList: React.FC<ImageListProps> = () => {
	const { getRootProps, getInputProps, isDragActive } = useImageUpload();
	const dataset = useAtomValue(datasetAtom);
	return (
		<div className="relative aspect-[1/1] size-full px-12">
			{dataset.length < 10 ? (
				<div className="col-span-full px-8 py-4 rounded-xl bg-blue-100 text-blue-400 mb-8">
					You can upload up to 10 images max.
				</div>
			) : (
				<div className="col-span-full px-8 py-4 rounded-xl bg-red-100 text-red-400 mb-8">
					You have reached the maximum limit of 10 images.
				</div>
			)}
			<div
				{...getRootProps()}
				className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4"
			>
				{dataset.map((imageSrc, index) => {
					return (
						<Image
							src={imageSrc}
							key={index}
							alt="dataset images"
							width={500}
							height={500}
							objectFit="cover"
							className="relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105"
						/>
					);
				})}
			</div>

			{isDragActive && (
				<div
					{...getRootProps()}
					className="dropzone border-2 border-dashed border-gray-400 size-full absolute top-0 left-0 flex items-center justify-center rounded-lg cursor-pointer bg-gray-500/50"
				>
					<input {...getInputProps()} />
					<p className="text-white">Drop the files here ...</p>
				</div>
			)}
		</div>
	);
};

export default ImageList;