import React from 'react';

const TripleStarsIcon = ({
  className,
  colorLeft,
  colorRight,
  style,
}: {
  className?: string;
  colorLeft?: string;
  colorRight?: string;
  style?: React.CSSProperties;
}) => {
  // Default colors if not provided
  const leftColor = colorLeft || '#0494F7';
  const rightColor = colorRight || '#CA08EA';

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      fill="none"
      viewBox="0 0 48 36"
      className={className}
      style={style}
    >
      <path
        fill="url(#paint0_linear_10163_24270)"
        d="m.277 6.182 2.679-1.349a4.47 4.47 0 0 0 1.85-1.86L6.143.278c.185-.372.74-.372.925 0L8.41 2.972a4.5 4.5 0 0 0 1.845 1.861l2.684 1.35c.37.185.37.739 0 .925l-2.684 1.349a4.5 4.5 0 0 0-1.845 1.86l-1.342 2.694c-.185.372-.74.372-.925 0l-1.337-2.694a4.47 4.47 0 0 0-1.85-1.86L.277 7.107c-.37-.185-.37-.692 0-.925"
      ></path>
      <path
        fill="#fff"
        fillOpacity="0.05"
        d="m.277 6.182 2.679-1.349a4.47 4.47 0 0 0 1.85-1.86L6.143.278c.185-.372.74-.372.925 0L8.41 2.972a4.5 4.5 0 0 0 1.845 1.861l2.684 1.35c.37.185.37.739 0 .925l-2.684 1.349a4.5 4.5 0 0 0-1.845 1.86l-1.342 2.694c-.185.372-.74.372-.925 0l-1.337-2.694a4.47 4.47 0 0 0-1.85-1.86L.277 7.107c-.37-.185-.37-.692 0-.925"
      ></path>
      <path
        fill="url(#paint1_linear_10163_24270)"
        d="m47.34 17.168-6.194 3.112A9.7 9.7 0 0 0 36.85 24.6l-3.095 6.229c-.462.879-1.712.879-2.174 0L28.485 24.6a9.7 9.7 0 0 0-4.297-4.321l-6.19-3.112c-.925-.465-.925-1.768-.046-2.186l6.236-3.112a9.7 9.7 0 0 0 4.297-4.322l3.095-6.229a1.226 1.226 0 0 1 2.174 0l3.095 6.229a9.73 9.73 0 0 0 4.297 4.322l6.194 3.112a1.236 1.236 0 0 1 0 2.186"
      ></path>
      <path
        fill="#fff"
        fillOpacity="0.05"
        d="m47.34 17.168-6.194 3.112A9.7 9.7 0 0 0 36.85 24.6l-3.095 6.229c-.462.879-1.712.879-2.174 0L28.485 24.6a9.7 9.7 0 0 0-4.297-4.321l-6.19-3.112c-.925-.465-.925-1.768-.046-2.186l6.236-3.112a9.7 9.7 0 0 0 4.297-4.322l3.095-6.229a1.226 1.226 0 0 1 2.174 0l3.095 6.229a9.73 9.73 0 0 0 4.297 4.322l6.194 3.112a1.236 1.236 0 0 1 0 2.186"
      ></path>
      <path
        fill="url(#paint2_linear_10163_24270)"
        d="m19.547 29.818-2.683 1.349a4.5 4.5 0 0 0-1.846 1.86l-1.342 2.694c-.185.372-.74.372-.925 0l-1.337-2.693a4.47 4.47 0 0 0-1.85-1.861l-2.679-1.35c-.37-.185-.37-.692 0-.925l2.679-1.349a4.47 4.47 0 0 0 1.85-1.86l1.337-2.694c.185-.372.74-.372.925 0l1.342 2.694a4.5 4.5 0 0 0 1.846 1.86l2.683 1.35c.37.185.37.739 0 .925"
      ></path>
      <path
        fill="#fff"
        fillOpacity="0.05"
        d="m19.547 29.818-2.683 1.349a4.5 4.5 0 0 0-1.846 1.86l-1.342 2.694c-.185.372-.74.372-.925 0l-1.337-2.693a4.47 4.47 0 0 0-1.85-1.861l-2.679-1.35c-.37-.185-.37-.692 0-.925l2.679-1.349a4.47 4.47 0 0 0 1.85-1.86l1.337-2.694c.185-.372.74-.372.925 0l1.342 2.694a4.5 4.5 0 0 0 1.846 1.86l2.683 1.35c.37.185.37.739 0 .925"
      ></path>
      <defs>
        <linearGradient
          id="paint0_linear_10163_24270"
          x1="-0.211"
          x2="48.21"
          y1="18"
          y2="18"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor={leftColor} stopOpacity="0.75"></stop>
          <stop offset="1" stopColor={rightColor} stopOpacity="0.75"></stop>
        </linearGradient>
        <linearGradient
          id="paint1_linear_10163_24270"
          x1="-0.211"
          x2="48.21"
          y1="18"
          y2="18"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor={leftColor} stopOpacity="0.75"></stop>
          <stop offset="1" stopColor={rightColor} stopOpacity="0.75"></stop>
        </linearGradient>
        <linearGradient
          id="paint2_linear_10163_24270"
          x1="-0.211"
          x2="48.21"
          y1="18"
          y2="18"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor={leftColor} stopOpacity="0.75"></stop>
          <stop offset="1" stopColor={rightColor} stopOpacity="0.75"></stop>
        </linearGradient>
      </defs>
    </svg>
  );
};

export default TripleStarsIcon;
