import React from "react";
import {
	House,
	Folder,
	GitBranch,
	Gear,
	User,
	SignOut,
	Plus,
	PencilSimple,
	Trash,
	FloppyDisk,
	X,
	ArrowsClockwise,
	Copy,
	MagnifyingGlass,
	List,
	Check,
	Warning,
	Info,
	Spinner,
	GitCommit,
	GitMerge,
	ClockCounterClockwise,
	ArrowDown,
	ArrowUp,
	File,
	FileText,
	Image,
	Binary,
	Code,
	ArrowSquareOut,
	Play,
	Stop,
	Terminal,
	ArrowLeft,
	DotsSixVertical,
	Bell,
	CaretDown,
	CaretRight,
} from "@phosphor-icons/react";

export type IconName =
	| "dashboard"
	| "projects"
	| "repositories"
	| "settings"
	| "profile"
	| "logout"
	| "add"
	| "edit"
	| "delete"
	| "save"
	| "cancel"
	| "refresh"
	| "copy"
	| "search"
	| "menu"
	| "close"
	| "success"
	| "error"
	| "warning"
	| "info"
	| "loading"
	| "branch"
	| "commit"
	| "merge"
	| "history"
	| "pull"
	| "push"
	| "fetch"
	| "file"
	| "folder"
	| "code"
	| "document"
	| "image"
	| "binary"
	| "external"
	| "play"
	| "stop"
	| "terminal"
	| "arrow-left"
	| "drag"
	| "bell"
	| "chevron-down"
	| "chevron-right";

const iconMap: Record<
	IconName,
	React.ComponentType<{
		size?: number | string;
		weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
	}>
> = {
	dashboard: House,
	projects: Folder,
	repositories: GitBranch,
	settings: Gear,
	profile: User,
	logout: SignOut,
	add: Plus,
	edit: PencilSimple,
	delete: Trash,
	save: FloppyDisk,
	cancel: X,
	refresh: ArrowsClockwise,
	copy: Copy,
	search: MagnifyingGlass,
	menu: List,
	close: X,
	success: Check,
	error: X,
	warning: Warning,
	info: Info,
	loading: Spinner,
	branch: GitBranch,
	commit: GitCommit,
	merge: GitMerge,
	history: ClockCounterClockwise,
	pull: ArrowDown,
	push: ArrowUp,
	fetch: ArrowsClockwise,
	file: File,
	folder: Folder,
	code: Code,
	document: FileText,
	image: Image,
	binary: Binary,
	external: ArrowSquareOut,
	play: Play,
	stop: Stop,
	terminal: Terminal,
	"arrow-left": ArrowLeft,
	drag: DotsSixVertical,
	bell: Bell,
	"chevron-down": CaretDown,
	"chevron-right": CaretRight,
};

export interface IconProps {
	name: IconName;
	size?: "sm" | "md" | "lg" | "xl";
	color?: string;
	weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
	className?: string;
	ariaLabel?: string;
}

const sizeMap: Record<NonNullable<IconProps["size"]>, number> = {
	sm: 16,
	md: 20,
	lg: 24,
	xl: 32,
};

export const Icon: React.FC<IconProps> = ({
	name,
	size = "md",
	color,
	weight = "regular",
	className,
	ariaLabel,
}) => {
	const IconComponent = iconMap[name];
	const sizeValue = sizeMap[size];

	if (!IconComponent) {
		return null;
	}

	return (
		<span
			className={`icon icon-${size}${className ? ` ${className}` : ""}`}
			style={{ color }}
			aria-label={ariaLabel}
			aria-hidden={!ariaLabel}
			role="img"
		>
			<IconComponent size={sizeValue} weight={weight} />
		</span>
	);
};