import {
  Icon24ArrowUpRightOutline, Icon24ArrowRightOutline, Icon24Cancel,
  Icon24CheckCircleOutline, Icon24ClockOutline, Icon24ComputerOutline,
  Icon24ComputerSmartphoneOutline, Icon24ComputerStackOutline,
  Icon24GlobeOutline, Icon24HistoryBackwardOutline, Icon24InfoCircleOutline,
  Icon24RefreshOutline, Icon24StatisticsOutline, Icon24WarningTriangleOutline,
  Icon20MoonOutline, Icon24SunOutline, Icon24WrenchOutline, Icon28RssFeedOutline, Icon24CopyOutline,
} from '@vkontakte/icons';
import type { ComponentType } from 'react';

type Props = { size?: number; className?: string };
type VkIcon = ComponentType<{ width?: number; height?: number; className?: string }>;
function adapt(Icon: VkIcon) {
  return function AppIcon({ size = 24, className }: Props) { return <Icon width={size} height={size} className={className} aria-hidden="true" />; };
}
export const ArrowUpRight = adapt(Icon24ArrowUpRightOutline);
export const ArrowRight = adapt(Icon24ArrowRightOutline);
export const Close = adapt(Icon24Cancel);
export const Check = adapt(Icon24CheckCircleOutline);
export const Clock = adapt(Icon24ClockOutline);
export const Monitor = adapt(Icon24ComputerOutline);
export const Devices = adapt(Icon24ComputerSmartphoneOutline);
export const Server = adapt(Icon24ComputerStackOutline);
export const Globe = adapt(Icon24GlobeOutline);
export const History = adapt(Icon24HistoryBackwardOutline);
export const Info = adapt(Icon24InfoCircleOutline);
export const Refresh = adapt(Icon24RefreshOutline);
export const Statistics = adapt(Icon24StatisticsOutline);
export const Warning = adapt(Icon24WarningTriangleOutline);
export const Moon = adapt(Icon20MoonOutline);
export const Sun = adapt(Icon24SunOutline);
export const Wrench = adapt(Icon24WrenchOutline);
export const Rss = adapt(Icon28RssFeedOutline);
export const Copy = adapt(Icon24CopyOutline);
export const serviceIcons: Record<string, ReturnType<typeof adapt>> = { api: Server, website: Globe, pwa: Devices, board: Monitor, admin: Wrench };