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>
  );
}