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

const Circle4PeopleIcon = ({
  className,
  onClick,
  title,
  timer,
  fill = "#5F6C7B",
}: Circle4PeopleIconType) => {
  return (
    <svg
      width="75"
      height="75"
      viewBox="0 0 75 75"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      onClick={onClick}
    >
      <path
        d="M70.9565 24.8184C73.1894 24.8184 74.9995 26.6285 74.9995 28.8614V45.0331C74.9995 47.266 73.1894 49.0761 70.9565 49.0761V24.8184Z"
        fill={fill}
        fillOpacity="0.12"
      />
      <path
        d="M25.999 4.11816C25.999 1.8853 27.8091 0.0752001 30.042 0.0752001L46.2141 0.0752001C48.4469 0.0752001 50.257 1.8853 50.257 4.11816L25.999 4.11816Z"
        fill={fill}
        fillOpacity="0.12"
      />
      <path
        d="M50.2559 70.2617C50.2559 72.4946 48.4458 74.3047 46.2129 74.3047H30.0408C27.808 74.3047 25.9979 72.4946 25.9979 70.2617H50.2559Z"
        fill={fill}
        fillOpacity="0.12"
      />
      <path
        d="M4.81201 49.0752C2.57912 49.0752 0.769012 47.2651 0.769012 45.0322L0.769012 28.8604C0.769012 26.6275 2.57912 24.8174 4.81201 24.8174L4.81201 49.0752Z"
        fill={fill}
        fillOpacity="0.12"
      />
      <ellipse
        cx="37.8909"
        cy="37.2011"
        rx="30.3225"
        ry="30.3222"
        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 Circle4PeopleIcon;
