import useGetQuery from "@/hooks/useGetQuery"
import Image, { StaticImageData } from "next/image"

type Props = {
  title: "goals" | "vision" | "mission"
  image: string | StaticImageData
  endPoint: string
  queryKey: [string, Lang]
  lang: Lang
}
const GoalsCard = ({ image, title, lang, endPoint, queryKey }: Props) => {
  const { data } = useGetQuery<GoalsCardType>({
    endpoint: endPoint,
    queryKey: queryKey,
    staleTime: 50000,
  })

  if (!data) return null

  const CardImage = () =>
    title === "goals" ? (
      data?.data?.images.length > 0 ? (
        data?.data?.images.length > 1 ? (
          <div className="w-full grid grid-cols-2 gap-x-8">
            <Image
              src={data?.data?.images[0].original_url || image}
              alt={title}
              width={276}
              height={368}
              className="aspect-[276/368] w-full object-cover"
            />
            <Image
              // @ts-ignore
              src={data?.data?.images[1].original_url || image}
              alt={title}
              width={276}
              height={368}
              className="aspect-[276/368] w-full object-cover -translate-y-10"
            />
          </div>
        ) : (
          <Image
            src={data?.data?.images[0].original_url || image}
            alt={title}
            width={499}
            height={270}
            className="w-full object-cover"
          />
        )
      ) : null
    ) : data?.data?.images.length > 0 ? (
      <Image
        src={data?.data?.images[0].original_url || image}
        alt={title}
        width={499}
        height={270}
        className="w-full object-cover"
      />
    ) : null

  return (
    <div className="container grid grid-cols-1 lg:grid-cols-2 justify-between items-center gap-x-10 py-20">
      <div className={`${title === "mission" && "order-2"} max-lg:order-2 max-lg:mt-5`}>
        <h3 className="text-mainBlue mb-6 font-bold text-2xl">
          {data?.data?.text?.[lang]}
        </h3>
        <p className="text-textGray">{data?.data?.description?.[lang]}</p>
      </div>
      <CardImage />
    </div>
  )
}

export default GoalsCard