import {
  Icon20ArrowDownOutline, Icon20ArrowRightOutline, Icon20ArrowUpRightOutline,
  Icon20BusOutline, Icon20Check, Icon20ClockOutline, Icon20DownloadOutline,
  Icon20GlobeCrossOutline, Icon20RefreshOutline, Icon20ShareOutline,
  Icon24Bookmark, Icon24BookmarkOutline, Icon24Cancel,
  Icon24ChevronDown, Icon24LocationOutline, Icon24SearchOutline,
  Icon24Add, Icon24HomeOutline, Icon24WorkOutline, Icon24WarningTriangleOutline,
  Icon28SettingsOutline, Icon28MoonOutline, Icon28SunOutline, Icon28ComputerSmartphoneOutline,
} from '@vkontakte/icons';
import type { ComponentType } from 'react';

type IconProps = { size?: number; className?: string };
type VkIcon = ComponentType<{ width?: number; height?: number; className?: string }>;

function adapt(Icon: VkIcon) {
  return function AppIcon({ size = 20, className }: IconProps) {
    return <Icon width={size} height={size} className={className} aria-hidden="true" />;
  };
}

export const ArrowDown = adapt(Icon20ArrowDownOutline);
export const ArrowRight = adapt(Icon20ArrowRightOutline);
export const ArrowUpRight = adapt(Icon20ArrowUpRightOutline);
export const BusFront = adapt(Icon20BusOutline);
export const Check = adapt(Icon20Check);
export const Clock3 = adapt(Icon20ClockOutline);
export const Download = adapt(Icon20DownloadOutline);
export const WifiOff = adapt(Icon20GlobeCrossOutline);
export const RefreshCw = adapt(Icon20RefreshOutline);
export const X = adapt(Icon24Cancel);
export const ChevronDown = adapt(Icon24ChevronDown);
export const MapPin = adapt(Icon24LocationOutline);
export const Search = adapt(Icon24SearchOutline);
export const Plus = adapt(Icon24Add);
export const Home = adapt(Icon24HomeOutline);
export const Work = adapt(Icon24WorkOutline);
export const Warning = adapt(Icon24WarningTriangleOutline);
export const Share = adapt(Icon20ShareOutline);
export const SettingsIcon = adapt(Icon28SettingsOutline);
export const Moon = adapt(Icon28MoonOutline);
export const Sun = adapt(Icon28SunOutline);
export const Devices = adapt(Icon28ComputerSmartphoneOutline);

export function Bookmark({ size = 24, className, fill }: IconProps & { fill?: string }) {
  const Icon = fill === 'currentColor' ? Icon24Bookmark : Icon24BookmarkOutline;
  return <Icon width={size} height={size} className={className} aria-hidden="true" />;
}