"use client";

interface Props {
  visible: boolean;
}

export function EstimateProgress({ visible }: Props) {
  if (!visible) return null;

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: 10,
        padding: "12px 16px",
        background: "#eff6ff",
        border: "1px solid #bfdbfe",
        borderRadius: 8,
        color: "#1d4ed8",
        fontSize: 14,
        fontWeight: 500,
        marginTop: 12,
      }}
    >
      {/* Spinning circle SVG */}
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        style={{ animation: "ti-spin 1s linear infinite", flexShrink: 0 }}
        aria-hidden="true"
      >
        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
      </svg>
      <span>Считаем оценку…</span>
      <style>{`@keyframes ti-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}
