import * as React from "react";
import type { LucideProps } from "lucide-react";
/**
 * Custom star icon with sharp edges (no curved corners)
 * Used specifically for the Rating component to match Figma design
 *
 * Unlike lucide-react's Star icon which has rounded strokeLinejoin,
 * this icon uses miter joins for crisp, pointed edges.
 */
export const StarRating = React.forwardRef<SVGSVGElement, LucideProps>(
  (
    {
      className = "fill-yellow-400 stroke-yellow-400",
      size = 16,
      strokeWidth = 1.33,
      absoluteStrokeWidth = true,
      ...props
    },
    ref
  ) => {
    const computedStrokeWidth = absoluteStrokeWidth
      ? (Number(strokeWidth) * 24) / Number(size)
      : strokeWidth;

    return (
      <svg
        ref={ref}
        aria-hidden="true"
        className={className}
        fill="none"
        height={size}
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="miter"
        strokeWidth={computedStrokeWidth}
        viewBox="0 0 24 24"
        width={size}
        xmlns="http://www.w3.org/2000/svg"
        {...props}
      >
        <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
      </svg>
    );
  }
);

StarRating.displayName = "StarRating";