import React from 'react';

const Variable = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
  <svg
    width={width}
    height={width}
    viewBox={viewBox}
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M2.5 6.78906C2.5 4.57992 4.29086 2.78906 6.5 2.78906H18.5C20.7091 2.78906 22.5 4.57992 22.5 6.78906V7.03906H2.5V6.78906ZM2.5 8.53906H22.5V18.7891C22.5 20.9982 20.7091 22.7891 18.5 22.7891H6.5C4.29086 22.7891 2.5 20.9982 2.5 18.7891V8.53906ZM7.92336 12.3487C8.09133 11.9701 7.92055 11.5269 7.54192 11.359C7.16329 11.191 6.72019 11.3618 6.55222 11.7404L6.52164 11.8094C5.62306 13.835 5.58616 16.1388 6.41942 18.1922L6.54283 18.4963C6.69859 18.8801 7.13599 19.065 7.51981 18.9092C7.90362 18.7535 8.0885 18.3161 7.93275 17.9323L7.80934 17.6281C7.12912 15.9519 7.15924 14.0712 7.89279 12.4176L7.92336 12.3487ZM18.4478 11.7404C18.2798 11.3618 17.8367 11.191 17.4581 11.359C17.0795 11.5269 16.9087 11.97 17.0766 12.3487L17.1072 12.4176C17.8408 14.0712 17.8709 15.9519 17.1907 17.6282L17.0672 17.9323C16.9115 18.3161 17.0964 18.7535 17.4802 18.9093C17.864 19.065 18.3014 18.8801 18.4572 18.4963L18.5806 18.1922C19.4138 16.1388 19.3769 13.835 18.4784 11.8094L18.4478 11.7404ZM10.9089 12.4776C10.616 12.1847 10.1411 12.1847 9.84821 12.4776C9.55532 12.7705 9.55532 13.2454 9.84821 13.5383L11.4393 15.1294L9.84821 16.7205C9.55532 17.0134 9.55532 17.4883 9.84821 17.7812C10.1411 18.0741 10.616 18.0741 10.9089 17.7812L12.5 16.1901L14.0911 17.7812C14.384 18.0741 14.8589 18.0741 15.1518 17.7812C15.4447 17.4883 15.4447 17.0134 15.1518 16.7205L13.5607 15.1294L15.1518 13.5383C15.4447 13.2454 15.4447 12.7705 15.1518 12.4776C14.8589 12.1847 14.384 12.1847 14.0911 12.4776L12.5 14.0687L10.9089 12.4776Z"
      fill={fill}
    />
  </svg>
);

export default Variable;
