import Link from "next/link"

import { GetMyPagesLogo } from "@/lib/graphql/Query/Logo.graphql"
import { request } from "@/lib/graphql/request"

import Image from "@/components/Image"

import styles from "./logo.module.css"

import type { LangParams } from "@/types/params"
import type { LogoQueryData } from "@/types/requests/myPages/logo"

export default async function Logo({ lang }: LangParams) {
  const { data } = await request<LogoQueryData>(GetMyPagesLogo, {
    locale: lang,
  })
  if (
    !data.all_header.items.length ||
    !data.all_header.items?.[0].logoConnection.totalCount
  ) {
    return null
  }
  const logo = data.all_header.items[0].logoConnection.edges[0]
  return (
    <Link className={styles.link} href="#">
      <Image
        alt={logo.node.title}
        height={logo.node.dimension.height}
        src={logo.node.url}
        width={logo.node.dimension.width}
      />
    </Link>
  )
}