---
interface Props {
  poster: string;
  content?: string;
  name?: string;
  designation?: string;
  video?: string;
}
const { poster, content, name, designation, video } = Astro.props;
console.log("Video URL:", video);
---

<div>
  <div
    data-testimonial-video
    class="relative w-full max-w-280 mx-auto rounded-[30px] corner-squircle overflow-hidden"
  >
    <video
      class="w-full aspect-video object-cover"
      width="1000px"
      playsinline
      preload="metadata"
      poster={poster}
    >
      <source src={video} type="video/mp4" />
      Your browser does not support the video tag.
    </video>
    {
      video && (
        <button
          class="absolute inset-0 grid place-items-center shadow-lg group bg-dark/40 cursor-pointer"
          aria-label="Resume"
        >
          <div class="transition-all duration-300 group-hover:scale-125 bg-white/90 hover:bg-white rounded-full size-24 grid place-items-center relative">
            <div
              class="inset-0 scale-90 transition-transform duration-300 size-full absolute rounded-full border-2 border-solid border-t-transparent border-b-transparent border-primary animate-spin"
              style="animation-duration: 8s;"
            />
            <svg
              width="36"
              height="36"
              class="size-9"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 36 36"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M20.9108 9.50547C23.3603 10.897 25.2851 11.9905 26.6564 12.9922C28.037 14.0008 29.0582 15.0549 29.4239 16.4448C29.6921 17.4639 29.6921 18.5361 29.4239 19.5552C29.0582 20.9451 28.037 21.9991 26.6564 23.0077C25.2851 24.0094 23.3603 25.1029 20.9109 26.4945C18.5448 27.8386 16.5495 28.9722 15.0348 29.6166C13.508 30.2659 12.1159 30.5952 10.763 30.2118C9.76878 29.9299 8.86412 29.3952 8.13534 28.6599C7.14629 27.6621 6.74927 26.2828 6.56144 24.6231C6.37497 22.9753 6.37499 20.8185 6.375 18.0751V17.9248C6.37499 15.1815 6.37497 13.0246 6.56144 11.3769C6.74927 9.71712 7.14629 8.33789 8.13534 7.34C8.86412 6.60473 9.76878 6.06996 10.763 5.78822C12.1159 5.40485 13.508 5.73401 15.0348 6.38345C16.5495 7.02771 18.5448 8.16123 20.9108 9.50547Z"
                fill="url(#paint0_linear_43_654)"
              />
              <defs>
                <linearGradient
                  id="paint0_linear_43_654"
                  x1="18"
                  y1="30.3751"
                  x2="18"
                  y2="5.62488"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="var(--color-primary-light)" />
                  <stop offset="1" stop-color="var(--color-primary)" />
                </linearGradient>
              </defs>
            </svg>
          </div>
        </button>
      )
    }
  </div>
  <div class="p-7 rounded-[30px] mt-2.5 corner-squircle bg-light/60">
    <p class="text-text-light text-h6 text-center">
      {content}
    </p>
    <hr class="opacity-20 my-10" />
    <div class="text-center">
      <p class="text-text-light font-semibold">{name}</p>
      <p class="text-text-dark/60 text-sm">{designation}</p>
    </div>
  </div>
</div>