tabler/shared/ui/SwitchIcon.astro

---
import Icon from './Icon.astro';

interface Props {
	icon?: string;
	iconB?: string;
	iconAColor?: string;
	iconBColor?: string;
	iconBClass?: string;
	variant?: string;
	active?: boolean;
}

const {
	icon = 'heart',
	iconB,
	iconAColor = 'muted',
	iconBColor = 'red',
	iconBClass,
	variant,
	active,
} = Astro.props;

const resolvedIconB = iconB ?? icon ?? 'heart';
// star/heart force the filled variant; otherwise use the passed class.
const resolvedIconBClass = icon === 'star' || icon === 'heart' ? 'icon-filled' : iconBClass;

const buttonClass = ['switch-icon', variant && `switch-icon-${variant}`, active && 'active']
---

<button class:list={buttonClass} data-bs-toggle="switch-icon">
	<span class={`switch-icon-a text-${iconAColor}`}>
		<Icon name={icon} />
	</span>
	<span class={`switch-icon-b text-${iconBColor}`}>
		<Icon name={resolvedIconB} class={resolvedIconBClass} />
	</span>
</button>