import { __ } from "@wordpress/i18n";
import { getBlockType } from "@wordpress/blocks";
import "./VideoIcon.scss";

export default ({ thumbnail, type }) => {
  const getIcon = () => {
    const blockType = getBlockType(`presto-player/${type}`);
    return blockType?.icon?.src ? (
      blockType.icon.src
    ) : (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        className="presto-video-icon--svg"
      >
        <path
          fillRule="evenodd"
          d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z"
          clipRule="evenodd"
        />
      </svg>
    );
  };

  if (thumbnail) {
    return (
      <img
        className="presto-video-icon--img"
        src={thumbnail}
        alt="Presto video thumbnail"
      />
    );
  }

  return (
    <div className="presto-video-icon--placeholder">
      {getIcon()}
    </div>
  );
};
