// ═══════════════════════════════════════════════════════════════════
//  Neon Design System  –  SVG Icon Components
// ═══════════════════════════════════════════════════════════════════
//
//  Each icon is a Slint component wrapping an SVG with theme-aware
//  `colorize` tinting. Size defaults to 20px.
//
//  Usage:  IconHome { color: Theme.neon-cyan; size: 24px; }
//
//  Full catalog (55 icons) lives in ui/icons/*.svg for use from
//  Rust code via `@image-url("../icons/home.svg")`.
//
// ═══════════════════════════════════════════════════════════════════

import { Theme } from "../theme.slint";

// ── Icon wrapper helper ──────────────────────────────────────────

component Icon {
    in property <image> svg;
    in property <color> color: Theme.text-primary;
    in property <length> size: 20px;
    width: root.size;
    height: root.size;
    Image {
        source: root.svg;
        width: root.size;
        height: root.size;
        colorize: root.color;
    }
}

// ═══════════════════════════════════════════════════════════════════
//  Navigation & UI
// ═══════════════════════════════════════════════════════════════════

export component IconHome { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/home.svg"); color: root.color; size: root.size; }
}
export component IconMenu { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/menu.svg"); color: root.color; size: root.size; }
}
export component IconSettings { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/settings.svg"); color: root.color; size: root.size; }
}
export component IconBell { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/bell.svg"); color: root.color; size: root.size; }
}
export component IconSearch { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/search.svg"); color: root.color; size: root.size; }
}
export component IconCalendar { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/calendar.svg"); color: root.color; size: root.size; }
}
export component IconLayers { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/layers.svg"); color: root.color; size: root.size; }
}
export component IconGlobe { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/globe.svg"); color: root.color; size: root.size; }
}
export component IconFolder { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/folder.svg"); color: root.color; size: root.size; }
}
export component IconFile { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/file.svg"); color: root.color; size: root.size; }
}

// ═══════════════════════════════════════════════════════════════════
//  Actions
// ═══════════════════════════════════════════════════════════════════

export component IconX { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/x.svg"); color: root.color; size: root.size; }
}
export component IconPlus { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/plus.svg"); color: root.color; size: root.size; }
}
export component IconMinus { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/minus.svg"); color: root.color; size: root.size; }
}
export component IconCheck { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/check.svg"); color: root.color; size: root.size; }
}
export component IconEdit { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/edit.svg"); color: root.color; size: root.size; }
}
export component IconTrash { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/trash.svg"); color: root.color; size: root.size; }
}
export component IconCopy { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/copy.svg"); color: root.color; size: root.size; }
}
export component IconSave { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/save.svg"); color: root.color; size: root.size; }
}
export component IconDownload { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/download.svg"); color: root.color; size: root.size; }
}
export component IconUpload { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/upload.svg"); color: root.color; size: root.size; }
}
export component IconRefresh { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/refresh.svg"); color: root.color; size: root.size; }
}
export component IconFilter { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/filter.svg"); color: root.color; size: root.size; }
}
export component IconPower { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/power.svg"); color: root.color; size: root.size; }
}

// ═══════════════════════════════════════════════════════════════════
//  Navigation arrows
// ═══════════════════════════════════════════════════════════════════

export component IconChevronRight { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/chevron-right.svg"); color: root.color; size: root.size; }
}
export component IconChevronLeft { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/chevron-left.svg"); color: root.color; size: root.size; }
}
export component IconChevronDown { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/chevron-down.svg"); color: root.color; size: root.size; }
}

// ═══════════════════════════════════════════════════════════════════
//  View / Status
// ═══════════════════════════════════════════════════════════════════

export component IconEye { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/eye.svg"); color: root.color; size: root.size; }
}
export component IconEyeOff { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/eye-off.svg"); color: root.color; size: root.size; }
}
export component IconSun { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/sun.svg"); color: root.color; size: root.size; }
}
export component IconMoon { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/moon.svg"); color: root.color; size: root.size; }
}
export component IconInfo { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/info.svg"); color: root.color; size: root.size; }
}
export component IconAlertTriangle { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/alert-triangle.svg"); color: root.color; size: root.size; }
}
export component IconCheckCircle { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/check-circle.svg"); color: root.color; size: root.size; }
}
export component IconXCircle { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/x-circle.svg"); color: root.color; size: root.size; }
}
export component IconHelpCircle { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/help-circle.svg"); color: root.color; size: root.size; }
}
export component IconLock { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/lock.svg"); color: root.color; size: root.size; }
}
export component IconUnlock { in property <color> color: Theme.text-primary; in property <length> size: 20px;
    Icon { svg: @image-url("../icons/unlock.svg"); color: root.color; size: root.size; }
}
