import Image from "next/image";
import Logo from "@/public/assets/images/logo.png";
import Services from "./Services";
import Address from "./Address";
import Telefon from "./Telefon";
import ImageProfile from "./ImageProfile";
import QrCode from "./QrCode";

function Poster({ data }) {
  return (
    <div className="bg-poster rounded-[16px] overflow-hidden !pt-[32px] p-[24px] relative flex justify-between items-start">
      <div>
        <div className="flex items-center justify-start gap-[5px]">
          <Image src={Logo} width={30} height={30} alt="logo" />
          <p className="text-[#E7EEF6] text-[16px] font-bold">nobat724.com</p>
        </div>
        <p className="mt-[40px] text-[#E7EEF6] text-[20px] font-bold">
          {data?.name}
        </p>
        <p className="text-[24px] mt-[20px] text-[#E7EEF6] font-bold">
          تخصص:
          {data?.expertise?.map(
            (item, idx) =>
              `${item.name} ${data.expertise.length === idx + 1 ? "" : "|"} `
          )}
        </p>
        <Services data={data} />
        <Address data={data} />
        <Telefon data={data} />
      </div>
      <div className="flex flex-col justify-between items-end">
        <ImageProfile data={data} />
        <QrCode />
      </div>
    </div>
  );
}

export default Poster;