import * as React from 'react';

const ICONS = {
	'git-commit': (
		<>
			<circle cx="12" cy="12" r="4" />
			<line x1="1.05" y1="12" x2="7" y2="12" />
			<line x1="17.01" y1="12" x2="22.96" y2="12" />
		</>
	),
	'scroll-down': (
		<>
			<polyline points="7 13 12 18 17 13" />
			<polyline points="7 6 12 11 17 6" />
		</>
	)
};

export const IconDerivedElementComponent = 'svg' as const;

export type IconDerivedElement = SVGElementTagNameMap[typeof IconDerivedElementComponent];

type IconName = keyof typeof ICONS;

export interface IconProps extends React.SVGProps<IconDerivedElement> {
	name: IconName;
}

export const Icon = React.forwardRef<IconDerivedElement, IconProps>(({
	name,
	className,
	...etcProps
}, forwardedRef) => (
	<IconDerivedElementComponent
		{...etcProps}
		ref={forwardedRef}
		viewBox="0 0 24 24"
		className={`w-6 h-6 linejoin-round linecap-round stroke-2 stroke-current fill-none ${className ?? ''}`.trim()}
	>
		{ICONS[name]}
	</IconDerivedElementComponent>
));
