import CutCornerParentCard from "../global/CutCornerParentCard";
import RoundedTriangle from "../global/RoundedTriangle";
import VideoPlayerMini from "./VideoPlayerMini";
import ringingPhone from "../../public/images/ringingPhone.svg";
import Image from "next/image";
import Logo from "@/public/logo-noiatech.svg";
export default function VideoPlayer() {
  return (
    <div className="relative">
      <div className="mx-auto w-[90%] lg:w-120 xl:w-155">
        <CutCornerParentCard size={40} bottomLeft>
          <video
            controls
            className="aspect-video rounded-[inherit]"
            poster={Logo}
          >
            <source src="videos/test.mp4" type="video/mp4" />
            مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
          </video>
        </CutCornerParentCard>
      </div>

      <div className="absolute -top-10 w-40 border border-secondary rounded-2xl p-2 md:top-40 md:-right-20 xl:top-60 xl:-right-30">
        <VideoPlayerMini />
        <RoundedTriangle className="absolute bottom-0 right-0 bg-accent scale-[0.22] translate-x-[35%] translate-y-[35%] pointer-events-none">
          <Image
            src={ringingPhone}
            alt="call us"
            width={80}
            height={80}
            className="mt-15 mr-1"
          />
        </RoundedTriangle>
      </div>
    </div>
  );
}
