import React from "react";

const Loader: React.FC = () => {
  return (
    <div style={styles.loaderContainer} className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
      <div style={styles.loader} className="ratio ratio-4x3 rounded-5 shadow position-relative overflow-hidden">        
        <video className="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" poster="https://media.vensysco.com/loader-vtl.webp" preload="metadata" autoPlay loop muted playsInline>
            <source src="https://media.vensysco.com/loader-vtl.mp4" type="video/mp4" />
            Your browser does not support the video tag.
        </video>
      </div>
    </div>
  );
};

const styles: { [key: string]: React.CSSProperties } = {
  loaderContainer: {
    backgroundColor: "rgba(255, 255, 255, 0.7)",
    zIndex: 9999,
  },
  loader: {
    width: "250px",
    background: "#f8f9f9",
  },
};

export default Loader;