import React from 'react';

export interface SvgElementProps extends React.SVGAttributes<SVGElement> {
  /** SVG title (tooltip or additional description shown on hover) */
  title?: string;
}

/**
 * Reusable SVG wrapper with accessibility support and default props.
 * @example
 * <SvgElement aria-label="Custom icon" title="Custom tooltip">
 *   <path d="..." />
 * </SvgElement>
 */
export const SvgElement: React.FC<SvgElementProps> = ({
  children,
  className,
  'aria-label': ariaLabel,
  title,
  viewBox = '0 0 40 40',
  ...svgProps
}) => {
  // Determine if this is a decorative icon (no accessible label or title)
  const isDecorative = !ariaLabel && !title;

  return (
    <svg
      className={className}
      viewBox={viewBox}
      role={isDecorative ? 'presentation' : 'img'}
      aria-hidden={isDecorative ? 'true' : undefined}
      aria-label={ariaLabel}
      focusable="false"
      {...svgProps}
    >
      {title && <title>{title}</title>}
      {children}
    </svg>
  );
};
