"use client";

import { cn } from "@/lib/utils";

interface IOSSpinnerProps {
  size?: number;
  className?: string;
  color?: string;
}

/** iOS-style activity indicator (12-segment SVG spinner) */
export function IOSSpinner({
  size = 20,
  className,
  color = "currentColor",
}: IOSSpinnerProps) {
  return (
    <svg
      className={cn("ios-spinner animate-ios-spin", className)}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden
    >
      {Array.from({ length: 12 }).map((_, i) => (
        <rect
          key={i}
          x="11"
          y="2"
          width="2"
          height="5"
          rx="1"
          fill={color}
          opacity={0.15 + (i / 12) * 0.85}
          transform={`rotate(${i * 30} 12 12)`}
        />
      ))}
    </svg>
  );
}

export default IOSSpinner;
