// Icons come from Phosphor (@phosphor-icons/react, MIT, https://phosphoricons.com): one per-icon import each
// (dist/csr/<Name>) so Vite bundles only the icons used. The names below are the app's own (call sites use
// <Icon name="..." />); each maps to its closest Phosphor icon. One weight everywhere ("regular"); "fill" only where it
// marks state (the active nav item, notices). Decorative unless a title is given. No hand-drawn SVG in the app: see
// docs/desktop.md.
import { ArrowCounterClockwiseIcon } from '@phosphor-icons/react/dist/csr/ArrowCounterClockwise';
import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft';
import { ArrowRightIcon } from '@phosphor-icons/react/dist/csr/ArrowRight';
import { ArrowSquareOutIcon } from '@phosphor-icons/react/dist/csr/ArrowSquareOut';
import { ArrowsClockwiseIcon } from '@phosphor-icons/react/dist/csr/ArrowsClockwise';
import { BellIcon } from '@phosphor-icons/react/dist/csr/Bell';
import { BuildingsIcon } from '@phosphor-icons/react/dist/csr/Buildings';
import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown';
import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight';
import { ChatTextIcon } from '@phosphor-icons/react/dist/csr/ChatText';
import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check';
import { ClipboardTextIcon } from '@phosphor-icons/react/dist/csr/ClipboardText';
import { ClockIcon } from '@phosphor-icons/react/dist/csr/Clock';
import { CloudIcon } from '@phosphor-icons/react/dist/csr/Cloud';
import { CoinsIcon } from '@phosphor-icons/react/dist/csr/Coins';
import { CommandIcon } from '@phosphor-icons/react/dist/csr/Command';
import { CopyIcon } from '@phosphor-icons/react/dist/csr/Copy';
import { CubeIcon } from '@phosphor-icons/react/dist/csr/Cube';
import { DatabaseIcon } from '@phosphor-icons/react/dist/csr/Database';
import { DeviceMobileIcon } from '@phosphor-icons/react/dist/csr/DeviceMobile';
import { DotIcon } from '@phosphor-icons/react/dist/csr/Dot';
import { DownloadSimpleIcon } from '@phosphor-icons/react/dist/csr/DownloadSimple';
import { ExportIcon } from '@phosphor-icons/react/dist/csr/Export';
import { DotsThreeIcon } from '@phosphor-icons/react/dist/csr/DotsThree';
import { GaugeIcon } from '@phosphor-icons/react/dist/csr/Gauge';
import { EyeIcon } from '@phosphor-icons/react/dist/csr/Eye';
import { EyeSlashIcon } from '@phosphor-icons/react/dist/csr/EyeSlash';
import { FileTextIcon } from '@phosphor-icons/react/dist/csr/FileText';
import { FlaskIcon } from '@phosphor-icons/react/dist/csr/Flask';
import { FolderIcon } from '@phosphor-icons/react/dist/csr/Folder';
import { FolderPlusIcon } from '@phosphor-icons/react/dist/csr/FolderPlus';
import { FunnelIcon } from '@phosphor-icons/react/dist/csr/Funnel';
import { GearSixIcon } from '@phosphor-icons/react/dist/csr/GearSix';
import { GlobeIcon } from '@phosphor-icons/react/dist/csr/Globe';
import { GridFourIcon } from '@phosphor-icons/react/dist/csr/GridFour';
import { ImageIcon } from '@phosphor-icons/react/dist/csr/Image';
import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info';
import { KeyIcon } from '@phosphor-icons/react/dist/csr/Key';
import { KeyboardIcon } from '@phosphor-icons/react/dist/csr/Keyboard';
import { LinkIcon } from '@phosphor-icons/react/dist/csr/Link';
import { LinkBreakIcon } from '@phosphor-icons/react/dist/csr/LinkBreak';
import { LockIcon } from '@phosphor-icons/react/dist/csr/Lock';
import { MagicWandIcon } from '@phosphor-icons/react/dist/csr/MagicWand';
import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass';
import { MoonIcon } from '@phosphor-icons/react/dist/csr/Moon';
import { PackageIcon } from '@phosphor-icons/react/dist/csr/Package';
import { PaperPlaneRightIcon } from '@phosphor-icons/react/dist/csr/PaperPlaneRight';
import { PaperPlaneTiltIcon } from '@phosphor-icons/react/dist/csr/PaperPlaneTilt';
import { PauseIcon } from '@phosphor-icons/react/dist/csr/Pause';
import { PencilSimpleIcon } from '@phosphor-icons/react/dist/csr/PencilSimple';
import { PlayIcon } from '@phosphor-icons/react/dist/csr/Play';
import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus';
import { PushPinIcon } from '@phosphor-icons/react/dist/csr/PushPin';
import { PushPinSlashIcon } from '@phosphor-icons/react/dist/csr/PushPinSlash';
import { PulseIcon } from '@phosphor-icons/react/dist/csr/Pulse';
import { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
import { RocketLaunchIcon } from '@phosphor-icons/react/dist/csr/RocketLaunch';
import { ShieldCheckIcon } from '@phosphor-icons/react/dist/csr/ShieldCheck';
import { SlidersHorizontalIcon } from '@phosphor-icons/react/dist/csr/SlidersHorizontal';
import { SparkleIcon } from '@phosphor-icons/react/dist/csr/Sparkle';
import { SquaresFourIcon } from '@phosphor-icons/react/dist/csr/SquaresFour';
import { StackIcon } from '@phosphor-icons/react/dist/csr/Stack';
import { StarIcon } from '@phosphor-icons/react/dist/csr/Star';
import { SunIcon } from '@phosphor-icons/react/dist/csr/Sun';
import { TagIcon } from '@phosphor-icons/react/dist/csr/Tag';
import { TerminalWindowIcon } from '@phosphor-icons/react/dist/csr/TerminalWindow';
import { TrashIcon } from '@phosphor-icons/react/dist/csr/Trash';
import { TrendUpIcon } from '@phosphor-icons/react/dist/csr/TrendUp';
import { UploadSimpleIcon } from '@phosphor-icons/react/dist/csr/UploadSimple';
import { UsersIcon } from '@phosphor-icons/react/dist/csr/Users';
import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning';
import { WarningCircleIcon } from '@phosphor-icons/react/dist/csr/WarningCircle';
import { XIcon } from '@phosphor-icons/react/dist/csr/X';
import type { Icon as PhosphorIcon, IconWeight } from '@phosphor-icons/react/lib';

const ICONS = {
  portfolio: SquaresFourIcon, folder: FolderIcon, folderPlus: FolderPlusIcon, key: KeyIcon, package: PackageIcon,
  settings: GearSixIcon, search: MagnifyingGlassIcon, refresh: ArrowsClockwiseIcon, chevronRight: CaretRightIcon,
  chevronDown: CaretDownIcon, plus: PlusIcon, x: XIcon, check: CheckIcon, alert: WarningIcon, alertCircle: WarningCircleIcon,
  info: InfoIcon, external: ArrowSquareOutIcon, download: DownloadSimpleIcon, trash: TrashIcon, star: StarIcon,
  message: ChatTextIcon, activity: PulseIcon, tag: TagIcon, text: FileTextIcon, plane: PaperPlaneTiltIcon,
  rocket: RocketLaunchIcon, shield: ShieldCheckIcon, clock: ClockIcon, command: CommandIcon, globe: GlobeIcon, moon: MoonIcon,
  sun: SunIcon, terminal: TerminalWindowIcon, copy: CopyIcon, image: ImageIcon, users: UsersIcon, layers: StackIcon,
  sparkle: SparkleIcon, pause: PauseIcon, cube: CubeIcon, arrowRight: ArrowRightIcon, arrowLeft: ArrowLeftIcon, dot: DotIcon,
  phone: DeviceMobileIcon, keyboard: KeyboardIcon, database: DatabaseIcon, wand: MagicWandIcon, building: BuildingsIcon,
  more: DotsThreeIcon, gauge: GaugeIcon, eye: EyeIcon, eyeOff: EyeSlashIcon, link: LinkIcon, unlink: LinkBreakIcon, bell: BellIcon, filter: FunnelIcon, play: PlayIcon,
  send: PaperPlaneRightIcon, edit: PencilSimpleIcon, upload: UploadSimpleIcon, sliders: SlidersHorizontalIcon,
  rotate: ArrowCounterClockwiseIcon, cloud: CloudIcon, coins: CoinsIcon, chart: TrendUpIcon, flask: FlaskIcon, grid: GridFourIcon,
  clipboard: ClipboardTextIcon, share: ExportIcon, lock: LockIcon, question: QuestionIcon, pin: PushPinIcon, pinOff: PushPinSlashIcon,
} satisfies Record<string, PhosphorIcon>;

export type IconName = keyof typeof ICONS;
export type { IconWeight };

export function Icon({ name, className, title, weight = 'regular' }: { name: IconName; className?: string; title?: string; weight?: IconWeight }) {
  const C = ICONS[name];
  return title
    ? <C className={className} weight={weight} role="img" aria-label={title}><title>{title}</title></C>
    : <C className={className} weight={weight} aria-hidden="true" />;
}

/** The stores' own marks (simple-icons data, CC0; vendored by tools/site-icons.ts into ./store-marks and shown as a
 *  CSS mask in the text colour, styles.css .store-mark). They only name the store next to its name, in the app's
 *  neutral ink, never as storebound's own branding. App Store is a trademark of Apple Inc.; Google Play is a trademark
 *  of Google LLC. */
export function StoreGlyph({ store, className }: { store: 'ios' | 'android'; className?: string }) {
  return <span className={`store-mark ${store === 'ios' ? 'sm-appstore' : 'sm-googleplay'}${className ? ` ${className}` : ''}`} aria-hidden="true" />;
}

export { Mark } from './brand';