import React from 'react';

const I = ({ children, size = 16 }) => (
	<svg
		width={size}
		height={size}
		viewBox="0 0 24 24"
		fill="none"
		stroke="currentColor"
		strokeWidth="2"
		strokeLinecap="round"
		strokeLinejoin="round"
		aria-hidden
	>
		{children}
	</svg>
);

export const IconGauge = (p) => (
	<I {...p}>
		<path d="M12 21a9 9 0 1 1 9-9" />
		<path d="M12 12l5-3" />
		<circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none" />
	</I>
);
export const IconFile = (p) => (
	<I {...p}>
		<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
		<path d="M14 2v6h6" />
		<path d="M8 13h8M8 17h5" />
	</I>
);
export const IconDoc = (p) => (
	<I {...p}>
		<path d="M4 6h16M4 12h16M4 18h10" />
	</I>
);
export const IconBot = (p) => (
	<I {...p}>
		<rect x="4" y="8" width="16" height="12" rx="2" />
		<path d="M12 8V4M8 4h8" />
		<circle cx="9" cy="14" r="1" fill="currentColor" stroke="none" />
		<circle cx="15" cy="14" r="1" fill="currentColor" stroke="none" />
	</I>
);
export const IconChart = (p) => (
	<I {...p}>
		<path d="M3 3v18h18" />
		<path d="M7 15l4-5 3 3 5-7" />
	</I>
);
export const IconSearch = (p) => (
	<I {...p}>
		<circle cx="11" cy="11" r="7" />
		<path d="m21 21-4.3-4.3" />
	</I>
);
export const IconKey = (p) => (
	<I {...p}>
		<circle cx="8" cy="15" r="4" />
		<path d="M10.9 12.1 21 2m-4 4 3 3" />
	</I>
);
export const IconSliders = (p) => (
	<I {...p}>
		<path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3" />
		<path d="M2 14h4M10 8h4M18 16h4" />
	</I>
);
export const IconExternal = (p) => (
	<I {...p}>
		<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
		<path d="M15 3h6v6M10 14 21 3" />
	</I>
);
export const IconRefresh = (p) => (
	<I {...p}>
		<path d="M21 12a9 9 0 1 1-2.6-6.4L21 8" />
		<path d="M21 3v5h-5" />
	</I>
);
/* The mark for anything the AI writes: a lens — a ring around a point of
   focus. Deliberately not a sparkle; that glyph has become the generic
   badge of every AI feature and says nothing about this one. */
export const IconSparkle = (p) => (
	<I {...p}>
		<circle cx="12" cy="12" r="8" />
		<circle cx="12" cy="12" r="2.6" fill="currentColor" stroke="none" />
		<path d="M12 2v3M12 19v3M2 12h3M19 12h3" />
	</I>
);
export const IconCode = (p) => (
	<I {...p}>
		<path d="m16 18 6-6-6-6M8 6l-6 6 6 6" />
	</I>
);
export const IconLink = (p) => (
	<I {...p}>
		<path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7" />
		<path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7" />
	</I>
);
export const IconArrows = (p) => (
	<I {...p}>
		<path d="M3 7h13l-3-3M21 17H8l3 3" />
	</I>
);
export const IconLayers = (p) => (
	<I {...p}>
		<path d="m12 2 9 5-9 5-9-5 9-5Z" />
		<path d="m3 12 9 5 9-5M3 17l9 5 9-5" />
	</I>
);
export const IconDownload = (p) => (
	<I {...p}>
		<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
		<path d="M7 10l5 5 5-5M12 15V3" />
	</I>
);
export const IconGoogle = (p) => (
	<I {...p}>
		<circle cx="12" cy="12" r="9" />
		<path d="M12 8h4.5a5 5 0 1 1-1.5-3.6" />
		<path d="M12 12h4.5" />
	</I>
);
export const IconMap = (p) => (
	<I {...p}>
		<path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z" />
		<path d="M9 4v14M15 6v14" />
	</I>
);
export const IconShield = (p) => (
	<I {...p}>
		<path d="M12 3l7 3v6c0 4.5-3 7.9-7 9-4-1.1-7-4.5-7-9V6l7-3Z" />
		<path d="m9 12 2 2 4-4" />
	</I>
);
export const IconPin = (p) => (
	<I {...p}>
		<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
		<circle cx="12" cy="10" r="3" />
	</I>
);
export const IconTrend = (p) => (
	<I {...p}>
		<path d="m3 17 6-6 4 4 8-8" />
		<path d="M14 7h7v7" />
	</I>
);
export const IconMail = (p) => (
	<I {...p}>
		<rect x="3" y="5" width="18" height="14" rx="2" />
		<path d="m3 7 9 6 9-6" />
	</I>
);
export const IconX = (p) => (
	<I {...p}>
		<path d="M18 6 6 18M6 6l12 12" />
	</I>
);

/* Gemini-style four-point spark, filled with the identity gradient.
   background-clip:text does not reach SVG fills, so the gradient lives
   inside the SVG itself. */
/* The identity mark: a solid lens on the brand colour, no gradient. */
export const IconSpark = ({ size = 16, fill }) => (
	<svg width={size} height={size} viewBox="0 0 24 24" aria-hidden>
		<circle cx="12" cy="12" r="9" fill="none" stroke={fill || 'currentColor'} strokeWidth="2.4" />
		<circle cx="12" cy="12" r="3.2" fill={fill || 'currentColor'} />
	</svg>
);
export const IconEye = (p) => (
	<I {...p}>
		<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
		<circle cx="12" cy="12" r="3" />
	</I>
);