interface CustomStarIconProps {
  className?: string;
  fill?: string;
  width?: number;
  height?: number;
}

export const CustomStarIcon = ({ 
  className, 
  fill = "#888888", 
  width = 24, 
  height = 24,
  ...props 
}: CustomStarIconProps) => (
  <svg 
    width={width} 
    height={height} 
    viewBox="0 0 24 24" 
    fill="none" 
    xmlns="http://www.w3.org/2000/svg" 
    className={className}
    {...props}
  >
    <path 
      d="M9.74696 2.14709C10.7891 0.38904 13.4111 0.44767 14.348 2.32287L16.3739 6.37756L20.871 7.02356C22.9667 7.3244 23.8383 9.83383 22.4589 11.3683L22.3197 11.5133L19.0839 14.6261L19.8514 19.0441C20.2229 21.184 17.9836 22.8236 16.056 21.8229L11.9999 19.715L7.94374 21.8229C6.0162 22.824 3.77554 21.184 4.14686 19.0441L4.91298 14.6261L1.68007 11.5133C0.106241 9.99772 0.964838 7.33451 3.12733 7.02356L7.6244 6.37756L9.65174 2.32287L9.74696 2.14709ZM12.3353 3.32922C12.1972 3.05267 11.8026 3.05267 11.6644 3.32922L9.60926 7.4425C9.29773 8.066 8.69959 8.49629 8.00965 8.59533L3.44813 9.25158C3.13914 9.29594 3.01673 9.67519 3.24159 9.89172L6.52284 13.0529L6.70008 13.2462C7.0832 13.7194 7.24804 14.3388 7.14247 14.9469L6.36464 19.4293C6.31198 19.7348 6.63142 19.9691 6.90663 19.8263L11.0199 17.6891L11.2557 17.5851C11.7356 17.4056 12.2642 17.4055 12.744 17.5851L12.9784 17.6891L17.0932 19.8263C17.3682 19.9687 17.6877 19.7346 17.6351 19.4293L16.8573 14.9469C16.7366 14.2518 16.9688 13.5422 17.4769 13.0529L20.7582 9.89172C20.9827 9.67519 20.8604 9.29605 20.5516 9.25158L15.9887 8.59533C15.2991 8.49614 14.702 8.06571 14.3905 7.4425L12.3353 3.32922Z" 
      fill={fill} 
    />
  </svg>
)