/* eslint-disable @next/next/no-img-element */

"use client";

import { Translate } from "@/components/translate";
import { DefaultResponse } from "@/types/global";
import { Shop } from "@/types/shop";
import MapPinIcon from "@/assets/icons/map-pin";
import { useSettings } from "@/hook/use-settings";
import Link from "next/link";
import { createMapUrl } from "@/utils/create-map-url";
import { mapIrStaticUrl } from "@/lib/map-ir";

interface ShopLocationProps {
  data?: DefaultResponse<Shop>;
}

export const ShopLocation = ({ data }: ShopLocationProps) => {
  const { settings } = useSettings();
  const lat = Number(data?.data?.lat_long?.latitude);
  const lng = Number(data?.data?.lat_long?.longitude);
  const apiKey =
    settings?.google_map_key ||
    process.env.NEXT_PUBLIC_MAP_IR_KEY ||
    process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY ||
    "";
  const staticSrc =
    Number.isFinite(lat) && Number.isFinite(lng)
      ? mapIrStaticUrl({ lat, lng, width: 600, height: 270, zoom: 10, apiKey })
      : "";
  return (
    <div className="rounded-button py-5 px-5 border border-gray-link col-span-2">
      <h2 className="text-xl font-semibold">
        <Translate value="location" />
      </h2>
      <Link
        href={createMapUrl(data?.data.lat_long.latitude, data?.data.lat_long.longitude)}
        className="flex items-center gap-1 my-5"
      >
        <MapPinIcon />
        <span className="text-sm">{data?.data.translation?.address}</span>
      </Link>
      {staticSrc ? (
        <img
          src={staticSrc}
          alt="location"
          className="w-full md:max-h-[270px] max-h-[390px] object-cover rounded-button"
        />
      ) : null}
    </div>
  );
};