'use client';

import { useId } from 'react';

export function FavoriteGradientStar({ className }: { className?: string }) {
  const gradientId = useId();

  return (
    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
      <defs>
        <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#c084fc">
            <animate
              attributeName="stop-color"
              values="#c084fc;#a78bfa;#e879f9;#c084fc"
              dur="3.2s"
              repeatCount="indefinite"
            />
          </stop>
          <stop offset="100%" stopColor="#8b5cf6">
            <animate
              attributeName="stop-color"
              values="#8b5cf6;#d946ef;#a855f7;#8b5cf6"
              dur="3.2s"
              repeatCount="indefinite"
            />
          </stop>
        </linearGradient>
      </defs>
      <path
        d="M11.525 2.295a1 1 0 0 1 1.95 0l2.138 6.586a1 1 0 0 0 .95.69h6.925a1 1 0 0 1 .592 1.806l-5.603 4.07a1 1 0 0 0-.364 1.118l2.138 6.586a1 1 0 0 1-1.538 1.118l-5.603-4.07a1 1 0 0 0-1.176 0l-5.603 4.07a1 1 0 0 1-1.538-1.118l2.138-6.586a1 1 0 0 0-.364-1.118L.92 11.377a1 1 0 0 1 .592-1.806h6.925a1 1 0 0 0 .95-.69z"
        fill={`url(#${gradientId})`}
      />
    </svg>
  );
}