import { gql } from "graphql-request"
import { request } from "@/lib/request"
import NextImage from "next/image"
import Image from "../../../../components/Image"
import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
import type { InsertResponse } from "@/types/requests/imagevault"

type TestImageData = {
  lopeztest: {
    json_rte: { json: JSON }
    customdam: InsertResponse
  }
}

const query = gql`
  query MyQuery {
    lopeztest(uid: "blt0b6d8eaa08d72c46") {
      json_rte {
        json
      }
      customdam
    }
  }
`

export default async function TestImagePage() {
  const response = await request<TestImageData>(query)

  const data = response.data?.lopeztest
  const customImage = insertResponseToImageVaultAsset(data.customdam)

  return (
    <div style={{ padding: 40 }}>
      <NextImage
        src={customImage.url}
        title={customImage.title}
        alt={customImage.meta.alt ?? customImage.title}
        width={400}
        height={400}
        quality={10}
        style={{ objectFit: "contain" }}
      />
      <Image
        src={customImage.url}
        title={customImage.title}
        alt={customImage.meta.alt ?? customImage.title}
        width={400}
        height={400}
        quality={10}
        style={{ objectFit: "contain" }}
      />
    </div>
  )
}