1import { Theme, StyleSets } from "../common"
 2import { interactive } from "../element"
 3import { InteractiveState } from "../element/interactive"
 4import { background, foreground } from "../style_tree/components"
 5
 6interface TabBarButtonOptions {
 7    icon: string
 8    color?: StyleSets
 9}
10
11type TabBarButtonProps = TabBarButtonOptions & {
12    state?: Partial<Record<InteractiveState, Partial<TabBarButtonOptions>>>
13}
14
15export function tab_bar_button(
16    theme: Theme,
17    { icon, color = "base" }: TabBarButtonProps
18) {
19    const button_spacing = 8
20
21    return interactive({
22        base: {
23            icon: {
24                color: foreground(theme.middle, color),
25                asset: icon,
26                dimensions: {
27                    width: 15,
28                    height: 15,
29                },
30            },
31            container: {
32                corner_radius: 4,
33                padding: {
34                    top: 4,
35                    bottom: 4,
36                    left: 4,
37                    right: 4,
38                },
39                margin: {
40                    left: button_spacing / 2,
41                    right: button_spacing / 2,
42                },
43            },
44        },
45        state: {
46            hovered: {
47                container: {
48                    background: background(theme.middle, color, "hovered"),
49                },
50            },
51            clicked: {
52                container: {
53                    background: background(theme.middle, color, "pressed"),
54                },
55            },
56        },
57    })
58}