components/project/MediaTile.tsx

import React from 'react';
import Image from 'next/image';
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from '@/components/ui/Tooltip';
import { MediaDetails } from '@/lib/fetch';

export interface MediaTileProps {
	media: MediaDetails;
}

export default function MediaTile({ media }: MediaTileProps) {
	const {
		url,
		thumbnails,
		id,
		name,
		properties: { width, height },
	} = media;
	// const imageSrc = thumbnails.length ? thumbnails[thumbnails.length - 1] : url;
	const imageSrc = url;
	return (
		<Tooltip>
			<TooltipTrigger asChild>
				<Image
					src={imageSrc}
					draggable={false}
					alt="dataset images"
					width={width}
					height={height}
					className="w-full h-auto relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content"
				/>
			</TooltipTrigger>
			<TooltipContent>
				<p>{name}</p>
				<p className="font-light text-xs">{`${width} x ${height}`}</p>
			</TooltipContent>
		</Tooltip>
	);
}