"use client";

import { Shop } from "@/types/shop";
import { useT } from "@/context/translation-map";
import { ImageWithFallBack } from "@/components/image";
import {
  TelegramIcon,
  TelegramShareButton,
  WhatsappIcon,
  WhatsappShareButton,
} from "react-share";

interface ShopShareProps {
  data?: Shop;
}

export const ShopShare = ({ data }: ShopShareProps) => {
  const t = useT();
  const shareUrl = window.location.href;
  const title = data?.translation?.title;
  return (
    <div className="sm:px-6 py-6 px-4">
      <div className="md:text-head text-xl font-semibold">{t("share.this.shop")}</div>
      <div className="flex gap-2.5 my-7">
        <div className="relative w-24 h-24 aspect-square">
          <ImageWithFallBack
            src={data?.logo_img || ""}
            alt={data?.translation?.title || "فروشگاه"}
            fill
            className="rounded-button object-cover"
          />
        </div>
        <div>
          <div className="text-base font-medium">{data?.translation?.title}</div>
          <span className="text-gray-field text-sm">{data?.translation?.address}</span>
        </div>
      </div>
      <div className="flex gap-2 flex-wrap">
        <div className="share-network">
          <TelegramShareButton
            url={shareUrl}
            title={title}
            className="share-network__button"
          >
            <TelegramIcon size={32} round />
          </TelegramShareButton>
        </div>

        <div className="share-network">
          <WhatsappShareButton
            url={shareUrl}
            title={title}
            separator=":: "
            className="share-network__button"
          >
            <WhatsappIcon size={32} round />
          </WhatsappShareButton>
        </div>
      </div>
    </div>
  );
};