'use client';

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

export interface MediaTileProps {
	media: MediaDetails;
}

const MediaTile: React.FC<MediaTileProps> = ({ media }) => {
	const { url: imageSrc, id, name } = media;
	return (
		<Tooltip>
			<TooltipTrigger asChild>
				<div className="relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content">
					<Image
						src={imageSrc}
						draggable={false}
						alt="dataset images"
						width={500}
						height={500}
						objectFit="cover"
						className="rounded-xl"
					/>
				</div>
			</TooltipTrigger>
			<TooltipContent>{name}</TooltipContent>
		</Tooltip>
	);
};

export default MediaTile;