import React from 'react';

type SpacePreviewIconProps = {
  width?: number;
  height?: number;
  color?: string;
};

export const SpacePreviewIcon = ({
  width = 14,
  height = 18,
  color = '#E2E2E5',
}: SpacePreviewIconProps) => (
  <svg
    width={width}
    height={height}
    viewBox="0 0 14 18"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g filter="url(#filter0_i_87_31239)">
      <path
        d="M11.7195 0.126953H2.27785C1.23927 0.126953 0.389526 0.990302 0.389526 2.04551V17.3939L6.99867 14.5161L13.6078 17.3939V2.04551C13.6078 0.990302 12.7581 0.126953 11.7195 0.126953Z"
        fill={color}
      />
    </g>
    <defs>
      <filter
        id="filter0_i_87_31239"
        x="0.389526"
        y="0.126953"
        width="13.2183"
        height="19.3077"
        filterUnits="userSpaceOnUse"
        color-interpolation-filters="sRGB"
      >
        <feFlood flood-opacity="0" result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dy="2.04061" />
        <feGaussianBlur stdDeviation="2.04061" />
        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
        />
        <feBlend
          mode="normal"
          in2="shape"
          result="effect1_innerShadow_87_31239"
        />
      </filter>
    </defs>
  </svg>
);