interface Square4PeopleIconType {
  className?: string;
  onClick?: () => void;
  title?: string;
  timer?: string;
  fill?: string;
}

const Square4PeopleIcon = ({
  className,
  onClick,
  title,
  timer,
  fill = "#5F6C7B",
}: Square4PeopleIconType) => {
  return (
    <svg
      width="75"
      height="75"
      viewBox="0 0 75 75"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      onClick={onClick}
    >
      <rect
        x="6.18408"
        y="6.18652"
        width="61.8574"
        height="61.8593"
        rx="10"
        fill={fill}
        fillOpacity="0.12"
      />
      <path
        d="M70.1074 24.7451C72.3849 24.7451 74.2312 26.5914 74.2312 28.8689V45.365C74.2312 47.6425 72.3849 49.4888 70.1074 49.4888V24.7451Z"
        fill={fill}
        fillOpacity="0.12"
      />
      <path
        d="M24.7422 4.12402C24.7422 1.84643 26.5885 7.29561e-05 28.8661 7.29561e-05L45.3612 7.29561e-05C47.6388 7.29561e-05 49.4851 1.84643 49.4851 4.12402L24.7422 4.12402Z"
        fill={fill}
        fillOpacity="0.12"
      />
      <path
        d="M49.4858 70.1064C49.4858 72.384 47.6395 74.2304 45.3619 74.2304H28.8668C26.5892 74.2304 24.7429 72.384 24.7429 70.1064H49.4858Z"
        fill={fill}
        fillOpacity="0.12"
      />
      <path
        d="M4.12354 49.4873C1.84601 49.4873 -0.000291348 47.641 -0.000291348 45.3635L-0.000291348 28.8674C-0.000291348 26.5899 1.84601 24.7436 4.12354 24.7436L4.12354 49.4873Z"
        fill={fill}
        fillOpacity="0.12"
      />

      {/* Title and Timer Text */}
      {title && (
        <text
          x="37.5"
          y="35"
          textAnchor="middle"
          fontSize="12"
          fontWeight="bold"
          fill="#5F6C7B"
          fontFamily="Arial, sans-serif"
        >
          {title}
        </text>
      )}
      {timer && (
        <text
          x="37.5"
          y="55"
          textAnchor="middle"
          fontSize="10"
          fill="#5F6C7B"
          fontFamily="Arial, sans-serif"
        >
          {timer}
        </text>
      )}
    </svg>
  );
};

export default Square4PeopleIcon;