import React from 'react';

/**
 * Inline SVGs. Deliberately hand-rolled rather than pulled from an icon
 * package — an icon dependency is most of what a toast library's bundle
 * budget gets spent on.
 */
const Svg: React.FC<{ children: React.ReactNode; label?: string }> = ({ children, label }) => (
  <svg
    viewBox="0 0 20 20"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.7"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden={label ? undefined : 'true'}
    aria-label={label}
    focusable="false"
  >
    {children}
  </svg>
);

export const SuccessIcon = () => (
  <Svg>
    <circle cx="10" cy="10" r="7.25" />
    <path d="M6.75 10.5l2.2 2.2 4.3-4.9" />
  </Svg>
);

export const ErrorIcon = () => (
  <Svg>
    <circle cx="10" cy="10" r="7.25" />
    <path d="M10 6.5v4.2" />
    <path d="M10 13.6h.01" />
  </Svg>
);

export const InfoIcon = () => (
  <Svg>
    <circle cx="10" cy="10" r="7.25" />
    <path d="M10 9.3v4.2" />
    <path d="M10 6.4h.01" />
  </Svg>
);

export const WarningIcon = () => (
  <Svg>
    <path d="M8.7 3.3L2.3 14.4a1.5 1.5 0 001.3 2.25h12.8a1.5 1.5 0 001.3-2.25L11.3 3.3a1.5 1.5 0 00-2.6 0z" />
    <path d="M10 7.6v3.4" />
    <path d="M10 13.5h.01" />
  </Svg>
);

export const CloseIcon = () => (
  <Svg>
    <path d="M6 6l8 8" />
    <path d="M14 6l-8 8" />
  </Svg>
);

/** Spinner geometry only; the rotation is a CSS animation. */
export const LoadingIcon = () => (
  <Svg>
    <circle cx="10" cy="10" r="7.25" opacity="0.25" />
    <path d="M17.25 10A7.25 7.25 0 0010 2.75" />
  </Svg>
);