"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import Services from "./Services";
import Address from "./Address";
import Telefon from "./Telefon";
import ImageProfile from "./ImageProfile";
import QrImg from "./QrImg";
import { getStateInfoClient } from "@/lib/getStateInfoClient";

function Poster({ data, onQrReady }) {
  const [siteName, setSiteName] = useState("");

  useEffect(() => {
    const { matchedCity, host } = getStateInfoClient();
    setSiteName(matchedCity?.domain || host || "");
  }, []);

  return (
    <div className="bg-poster overflow-hidden !pt-[32px] p-[24px] relative flex justify-between items-start">
      <div>
        <div className="flex items-center justify-start gap-[5px]">
          <Image src="/assets/images/logo.png" width={30} height={30} alt="logo" />
          <p className="text-[#E7EEF6] text-[16px] font-bold !-translate-y-1">
            {siteName}
          </p>
        </div>
        <p className="mt-[40px] text-[#E7EEF6] text-[20px] font-bold text-right">
          {data?.name}
        </p>
        <p className="text-[24px] mt-[20px] text-[#E7EEF6] font-bold text-right">
          تخصص:
          {data?.specialties?.map(
            (item, idx) =>
              `${item.name} ${data.specialties.length === idx + 1 ? "" : "|"} `
          )}
        </p>
        <Services data={data} />
        <Address data={data} />
        <Telefon data={data} />
      </div>
      <div className="flex flex-col justify-between items-end min-w-[200px]">
        <ImageProfile data={data} />
        <QrImg onReady={onQrReady} />
      </div>
    </div>
  );
}

export default Poster;