import React from 'react';

const SmileRectangle = ({ 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="M18.5 2.78906H6.5C4.29086 2.78906 2.5 4.57992 2.5 6.78906V18.7891C2.5 20.9982 4.29086 22.7891 6.5 22.7891H18.5C20.7091 22.7891 22.5 20.9982 22.5 18.7891V6.78906C22.5 4.57992 20.7091 2.78906 18.5 2.78906ZM9.99455 15.2252C9.6849 14.9536 9.21354 14.9825 8.93945 15.2908C8.66426 15.6004 8.69215 16.0744 9.00174 16.3496L9.27679 16.561C9.43912 16.6739 9.67203 16.8196 9.96968 16.9639C10.565 17.2526 11.4268 17.5391 12.5 17.5391C13.5733 17.5391 14.435 17.2526 15.0303 16.9639C15.328 16.8196 15.5609 16.6739 15.7232 16.561C15.8045 16.5044 15.8685 16.4558 15.9145 16.4193L15.9983 16.3496C16.3079 16.0744 16.3358 15.6004 16.0606 15.2908C15.7865 14.9824 15.3151 14.9536 15.0055 15.2252L14.8666 15.3296C14.7594 15.4042 14.5939 15.5085 14.3759 15.6142C13.94 15.8256 13.3018 16.0391 12.5 16.0391C11.6983 16.0391 11.06 15.8256 10.6241 15.6142C10.4061 15.5085 10.2406 15.4042 10.1334 15.3296L9.99455 15.2252ZM17.5 10.7891C17.5 11.3413 17.0523 11.7891 16.5 11.7891C15.9477 11.7891 15.5 11.3413 15.5 10.7891C15.5 10.2368 15.9477 9.78906 16.5 9.78906C17.0523 9.78906 17.5 10.2368 17.5 10.7891ZM8.5 11.7891C9.05228 11.7891 9.5 11.3413 9.5 10.7891C9.5 10.2368 9.05228 9.78906 8.5 9.78906C7.94772 9.78906 7.5 10.2368 7.5 10.7891C7.5 11.3413 7.94772 11.7891 8.5 11.7891Z"
      fill={fill}
    />
  </svg>
);

export default SmileRectangle;
