import React from 'react';

// Scallop radius for the flower-like outer border
const SCALLOP_R = (R, n) => R * Math.sin(Math.PI / n);

function scallopPath(cx, cy, R, n) {
  const r = SCALLOP_R(R, n);
  const pts = [];
  for (let i = 0; i < n; i++) {
    const a = (i / n) * 2 * Math.PI - Math.PI / 2;
    pts.push([cx + R * Math.cos(a), cy + R * Math.sin(a)]);
  }
  let d = `M ${pts[0][0].toFixed(2)} ${pts[0][1].toFixed(2)} `;
  for (let i = 0; i < n; i++) {
    const p2 = pts[(i + 1) % n];
    d += `A ${r.toFixed(2)} ${r.toFixed(2)} 0 0 0 ${p2[0].toFixed(2)} ${p2[1].toFixed(2)} `;
  }
  return d + 'Z';
}

function starPath(cx, cy, outer, inner, points = 5) {
  let d = '';
  for (let i = 0; i < points * 2; i++) {
    const r = i % 2 === 0 ? outer : inner;
    const a = (i / (points * 2)) * 2 * Math.PI - Math.PI / 2;
    const x = cx + r * Math.cos(a);
    const y = cy + r * Math.sin(a);
    d += `${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)} `;
  }
  return d + 'Z';
}

export default function VerifiedStamp({ size = 26, className = '' }) {
  const cx = 50, cy = 50, R = 44, n = 12;
  const green = '#9FD34E';
  const textPath = `M ${cx} ${cy - 36} A 36 36 0 1 1 ${cx - 0.01} ${cy - 36}`;
  const label = 'VERIFIED \u2022 VERIFIED \u2022 VERIFIED \u2022';

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      className={className}
      role="img"
      aria-label="Verified identity"
    >
      <path d={scallopPath(cx, cy, R, n)} fill={green} />
      <circle cx={cx} cy={cy} r={36} fill="#FFFFFF" />
      <circle cx={cx} cy={cy} r={36} fill="none" stroke={green} strokeWidth="1.5" />
      <path id="verified-stamp-arc" d={textPath} fill="none" />
      <text fontSize="6.5" fontWeight="700" fill={green} letterSpacing="0.5" fontFamily="Sora, sans-serif">
        <textPath href="#verified-stamp-arc" startOffset="0%">{label}</textPath>
      </text>
      <path d={starPath(cx, cy + 1, 13, 5.5)} fill={green} />
    </svg>
  );
}