"use client";

import { Button } from "@/components/button";
import Image from "next/image";
import { useSettings } from "@/hook/use-settings";
import { useIsApple } from "@/hook/use-is-apple";
import { useT } from "@/context/translation-map";
import { useEffect, useState } from "react";

interface MobileCardProps {
  img: string;
  title: string;
  description?: string;
  type: "vendor" | "customer";
}

export const MobileCard = ({ img, description, title, type }: MobileCardProps) => {
  const t = useT();
  const { settings } = useSettings();
  const isAppleDevice = useIsApple();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  const getUrl = () => {
    if (type === "customer") {
      return isAppleDevice ? settings?.customer_app_ios : settings?.customer_app_android;
    }
    return isAppleDevice ? settings?.vendor_app_ios : settings?.vendor_app_android;
  };
  const handleDownload = () => {
    window.open(getUrl(), "_blank", "noopener,noreferrer");
  };
  return (
    <div className="rounded-button overflow-hidden aspect-[345/410] md:aspect-[2/1] relative">
      <Image src={img} alt={title} fill className="object-cover" />
      <div className="flex flex-col relative z-[1] h-full md:p-10 p-5 bg-dark bg-opacity-30">
        <div className="flex-1">
          <div className="text-white md:text-[50px] text-[38px] font-semibold" suppressHydrationWarning>
            {mounted ? t(title) : "\u00A0"}
          </div>
          <span className="text-white md:text-lg text-sm" suppressHydrationWarning>
            {mounted ? t(description || "") : "\u00A0"}
          </span>
        </div>
        <div>
          <Button color="white" size="medium" onClick={handleDownload}>
            <span suppressHydrationWarning>{mounted ? t("download") : "\u00A0"}</span>
          </Button>
        </div>
      </div>
    </div>
  );
};