import React from 'react';
import { useQuery } from 'graphql-hooks';
import { Image } from 'react-datocms';

export default function DatoImage({ query }) {
  const { loading, error, data } = useQuery(query);
  if (loading) return 'Loading...'; // TODO: make these better
  if (error) return 'Something Bad Happened'; // TODO: make these better
  const { alt, title: caption, responsiveImage } = data.upload || {};

  return (
    <figure>
      <Image data={responsiveImage} alt={alt} />
      {caption && <figcaption>{caption}</figcaption>}
    </figure>
  );
}