import type { CSSProperties } from 'react';

/** Props shared by every icon. `color` defaults to the surrounding text colour. */
export interface IconProps {
  size?: number;
  color?: string;
  strokeWidth?: number;
  className?: string;
  style?: CSSProperties;
}

/** Build an outline icon from its SVG path(s) (24×24 viewBox) and its default size and stroke weight. */
function outlineIcon(path: string | string[], defaults: { size: number; strokeWidth: number }) {
  const paths = Array.isArray(path) ? path : [path];
  return function Icon({ size = defaults.size, color = 'currentColor', strokeWidth = defaults.strokeWidth, className, style }: IconProps) {
    return (
      <svg width={size} height={size} fill="none" viewBox="0 0 24 24" stroke={color} strokeWidth={strokeWidth} className={className} style={style}>
        {paths.map(d => <path key={d} strokeLinecap="round" strokeLinejoin="round" d={d} />)}
      </svg>
    );
  };
}

// ── Brand / feature icons ──
export const DbIcon = outlineIcon('M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4', { size: 16, strokeWidth: 1.5 });
export const ChartBarIcon = outlineIcon('M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z', { size: 16, strokeWidth: 1.8 });
export const BankIcon = outlineIcon('M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z', { size: 16, strokeWidth: 1.8 });
export const TrendingIcon = outlineIcon('M13 7h8m0 0v8m0-8l-8 8-4-4-6 6', { size: 16, strokeWidth: 1.8 });
export const FlowIcon = outlineIcon('M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4', { size: 16, strokeWidth: 1.8 });
export const TableIcon = outlineIcon('M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7', { size: 12, strokeWidth: 2 });
export const UserIcon = outlineIcon('M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z', { size: 13, strokeWidth: 2 });

// ── Actions ──
export const PlusIcon = outlineIcon('M12 4v16m8-8H4', { size: 10, strokeWidth: 2.5 });
export const TrashIcon = outlineIcon('M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16', { size: 14, strokeWidth: 2 });
export const PaperclipIcon = outlineIcon('M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13', { size: 15, strokeWidth: 1.8 });
export const SendIcon = outlineIcon('M12 19l9 2-9-18-9 18 9-2zm0 0v-8', { size: 14, strokeWidth: 2.5 });
export const PlayIcon = outlineIcon(['M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z', 'M21 12a9 9 0 11-18 0 9 9 0 0118 0z'], { size: 11, strokeWidth: 2 });
export const CopyIcon = outlineIcon('M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z', { size: 12, strokeWidth: 1.5 });
export const CheckIcon = outlineIcon('M5 13l4 4L19 7', { size: 12, strokeWidth: 2.5 });
export const ChevronRightIcon = outlineIcon('M9 5l7 7-7 7', { size: 12, strokeWidth: 2 });
export const ChevronDownIcon = outlineIcon('M19 9l-7 7-7-7', { size: 12, strokeWidth: 2 });

/** A spinning ring, for "working" states. */
export function SpinnerIcon({ size = 12, color = 'currentColor', className = '' }: Pick<IconProps, 'size' | 'color' | 'className'>) {
  return (
    <svg width={size} height={size} fill="none" viewBox="0 0 24 24" className={`animate-spin ${className}`.trim()}>
      <circle opacity={0.25} cx="12" cy="12" r="10" stroke={color} strokeWidth="4" />
      <path opacity={0.75} fill={color} d="M4 12a8 8 0 018-8v8z" />
    </svg>
  );
}