<script lang="ts">
	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
	import CopyIcon from "@lucide/svelte/icons/copy";

	import * as ButtonGroup from "@orochibraru/ui/button-group";
	import { Button } from "@orochibraru/ui/button";
	import { Input } from "@orochibraru/ui/input";
</script>

<div class="flex flex-wrap items-center gap-4">
	<ButtonGroup.Root>
		<Button variant="outline">Day</Button>
		<Button variant="outline">Week</Button>
		<Button variant="outline">Month</Button>
	</ButtonGroup.Root>
	<ButtonGroup.Root>
		<Button variant="outline" size="icon" aria-label="Previous month">
			<ChevronLeftIcon />
		</Button>
		<ButtonGroup.Text>October 2026</ButtonGroup.Text>
		<Button variant="outline" size="icon" aria-label="Next month">
			<ChevronRightIcon />
		</Button>
	</ButtonGroup.Root>
	<ButtonGroup.Root>
		<ButtonGroup.Text>https://</ButtonGroup.Text>
		<Input value="acme.com" aria-label="Domain" />
		<Button variant="outline" size="icon" aria-label="Copy">
			<CopyIcon />
		</Button>
	</ButtonGroup.Root>
</div>