import React from "react";

interface FR8IconProps {
  className?: string;
}

export const PDFSvgWithClose: React.FC<FR8IconProps> = (props) => {
  const { className } = props;
  const _class = className || "w-10 h-10";

  return (
    <svg
      className={_class}
      width="48"
  height="88"
  viewBox="0 0 48 48"
      xmlns="http://www.w3.org/2000/svg"
// viewBox="0 0 94 90"
      preserveAspectRatio="xMidYMid meet"
    >
       <g >
      {/* PDF Shape */}
                 <path d="M33.848 14.308H32.82L32.874 10.528C32.8675 10.3071 32.7824 10.0958 32.634 9.932L23.802 0.268C23.7311 0.186925 23.6442 0.121299 23.5469 0.0751964C23.4495 0.0290936 23.3437 0.00349841 23.236 0L4.75602 0C4.34168 0.00665211 3.94608 0.173802 3.6525 0.466265C3.35892 0.758727 3.19026 1.15369 3.18202 1.568V14.308H2.15202C1.58202 14.308 1.03202 14.544 0.632024 14.964C0.223902 15.3909 -0.00266536 15.9594 2.3665e-05 16.55V28.21C2.3665e-05 29.446 0.964024 30.45 2.15202 30.45H3.18202V38.43C3.18977 38.8453 3.35876 39.2414 3.65325 39.5344C3.94774 39.8274 4.34465 39.9944 4.76002 40H31.316C32.146 40 32.876 39.296 32.876 38.432V30.452H33.85C35.038 30.452 36.002 29.446 36.002 28.208V16.548C36.002 15.956 35.776 15.384 35.372 14.964C35.176 14.7577 34.9403 14.5933 34.6791 14.4805C34.4179 14.3678 34.1365 14.3091 33.852 14.308H33.848ZM5.90002 2.756H19.812V11.91C19.8113 12.1161 19.8901 12.3146 20.032 12.464C20.1009 12.5364 20.1837 12.5941 20.2755 12.6336C20.3673 12.6732 20.4661 12.6937 20.566 12.694H30.084V14.308H5.90002V2.756ZM5.90002 37.244V30.45H30.084V37.244H5.90002ZM22.582 3.04L23.352 3.908L28.512 9.614L28.798 9.96H23.524C23.124 9.96 22.874 9.894 22.768 9.76C22.662 9.63 22.6 9.42 22.582 9.134V3.04ZM4.00002 28.464V16.464H7.83602C9.28802 16.464 10.236 16.524 10.676 16.644C11.356 16.824 11.924 17.216 12.382 17.82C12.838 18.422 13.068 19.2 13.068 20.156C13.068 20.892 12.936 21.512 12.672 22.016C12.408 22.516 12.072 22.91 11.666 23.196C11.2949 23.4669 10.8733 23.6607 10.426 23.766C9.85602 23.88 9.03002 23.938 7.94802 23.938H6.39002V28.464H4.00002ZM6.39002 18.494V21.9H7.69802C8.64002 21.9 9.27002 21.836 9.58802 21.712C9.89538 21.596 10.1587 21.3866 10.3409 21.1133C10.5231 20.8399 10.6152 20.5163 10.604 20.188C10.6186 19.7929 10.4828 19.4069 10.224 19.108C9.97431 18.8261 9.63546 18.6383 9.26402 18.576C8.98002 18.522 8.40602 18.496 7.54402 18.496H6.39002V18.494ZM14.47 16.464H18.838C19.824 16.464 20.574 16.54 21.092 16.694C21.786 16.9 22.38 17.27 22.876 17.798C23.37 18.328 23.748 18.976 24.006 19.742C24.266 20.51 24.394 21.454 24.394 22.578C24.394 23.566 24.274 24.418 24.03 25.132C23.734 26.006 23.31 26.712 22.762 27.252C22.348 27.662 21.788 27.982 21.082 28.212C20.556 28.38 19.85 28.464 18.968 28.464H14.47V16.464ZM16.86 18.494V26.442H18.644C19.312 26.442 19.794 26.404 20.09 26.328C20.478 26.228 20.8 26.064 21.054 25.828C21.31 25.594 21.52 25.208 21.68 24.67C21.842 24.132 21.922 23.4 21.922 22.472C21.922 21.544 21.842 20.832 21.682 20.336C21.555 19.8984 21.3213 19.4991 21.002 19.174C20.6933 18.8859 20.3103 18.6898 19.896 18.608C19.562 18.532 18.908 18.494 17.936 18.494H16.86ZM25.886 28.464V16.464H34V18.494H28.276V21.334H33.216V23.364H28.276V28.464H25.886Z" fill="#EC6417" />
</g>

      {/* CLOSE ICON INSIDE (grouped & positioned) */}
      {/* translate moves the small close-group nearer top-right of the SVG */}
<g transform="translate(33, -6)" style={{ cursor: "pointer" }}>
        {/* red circular background */}
        <circle cx="7" cy="8" r="8" fill="#FF4D4D" />

        {/* white 'X' made with two lines, rounded ends */}
        <line
          x1="5"
          y1="3"
          x2="11"
          y2="10"
          stroke="#fff"
          strokeWidth="1.6"
          strokeLinecap="round"
        />
        <line
          x1="11"
          y1="3"
          x2="5"
          y2="9"
          stroke="#fff"
          strokeWidth="1.6"
          strokeLinecap="round"
        />
      </g>
    </svg>
  );
};
