<script module lang="ts">
	import { tv, type VariantProps } from "tailwind-variants";
	import type { ButtonVariants } from "./Button.svelte";

	export const buttonGroup = tv({
		base: "inline-flex items-center",
		variants: {
			// joined groups are the segmented control from Figma, built the way the appview's
			// .btn-group is: the group alone draws the outer border and the recessed surface,
			// its segments drop their own top/bottom border entirely (border-y-0) and stretch
			// to fill the inner box. that matters because a segment's y-border is the same
			// token as the group's, so keeping both stacks two 1px lines into one 2px-looking
			// edge above and below the selected segment. horizontally the segments keep their
			// border and it's pulled onto the neighbour's (-ml-px) so each seam collapses to a
			// single divider, and the outer ones onto the group's own edge.
			//
			// the recessed surface has to stay darker than the selected segment's
			// bg-background-default, and no single token does that in both modes — subtle is
			// below default in light (#f9fafb vs #fff) but above it in dark (#374151 vs
			// #1f2937) — so dark falls back to canvas (#111827), i.e. the appview's gray-900.
			spaced: {
				true: "gap-2",
				false: [
					"items-stretch gap-0 rounded border border-border-default bg-background-subtle dark:bg-background-canvas",
					"*:relative [&>*]:border-y-0",
					"[&>*:first-child]:-ml-px [&>*:last-child]:-mr-px",
					"[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]",
					"[&>*:not(:last-child)]:[--btn-radius-r:0px]",
					"[&>*:focus-visible]:z-10 [&>*:hover]:z-10"
				]
			}
		},
		defaultVariants: {
			spaced: false
		}
	});

	export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;

	/**
	 * Recipe for using ButtonGroup as a tab/segment switcher (e.g. Open/Closed issue filters,
	 * Write/Preview editor tabs). Per Figma, the selected segment reads as a raised, lighter
	 * surface (`default` + its inset shadow) while unselected segments are flat `ghost`
	 * buttons — never the plain `default` variant, which reads as the *hovered* state of an
	 * unselected segment. Figma also gives an unselected segment the same foreground as a
	 * selected one, where `ghost` on its own is muted, so the recipe overrides the colour
	 * here rather than changing `ghost` everywhere it's used.
	 */
	export function segmentProps(selected: boolean): {
		variant: ButtonVariants["variant"];
		insetShadow: boolean;
		class?: string;
	} {
		return selected
			? { variant: "default", insetShadow: true }
			: { variant: "ghost", insetShadow: false, class: "text-foreground-default" };
	}
</script>

<script lang="ts">
	import type { Snippet } from "svelte";

	interface Props {
		spaced?: ButtonGroupVariants["spaced"];
		class?: string;
		children: Snippet;
	}

	let { spaced = false, class: className, children }: Props = $props();

	const classes = $derived(buttonGroup({ spaced, class: className }));
</script>

<div class={classes}>
	{@render children()}
</div>
