<svelte:options runes={true} />

<script lang="ts">
	import Icon from '$lib/components/Icon.svelte'

	interface Props {
		/** Primary label text */
		label: string
		/** Optional secondary label/description */
		sublabel?: string
		/** Value displayed on the right side (before the chevron) */
		value?: string
		/** Click handler - typically pushes a new pane */
		onclick?: () => void
		/** Whether the row is disabled */
		disabled?: boolean
		/** Element color for styling (optional) */
		element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
	}

	const { label, sublabel, value, onclick, disabled = false, element }: Props = $props()
</script>

<button
	type="button"
	class="disclosure-row"
	class:disabled
	class:element-wind={element === 'wind'}
	class:element-fire={element === 'fire'}
	class:element-water={element === 'water'}
	class:element-earth={element === 'earth'}
	class:element-dark={element === 'dark'}
	class:element-light={element === 'light'}
	{onclick}
	{disabled}
>
	<div class="label-container">
		<span class="label">{label}</span>
		{#if sublabel}
			<span class="sublabel">{sublabel}</span>
		{/if}
	</div>
	<div class="value-area">
		{#if value}
			<span class="value">{value}</span>
		{/if}
		<Icon name="chevron-right" size={16} />
	</div>
</button>

<style lang="scss">
	@use '$src/themes/colors' as colors;
	@use '$src/themes/layout' as layout;
	@use '$src/themes/spacing' as spacing;
	@use '$src/themes/typography' as typography;
	@use '$src/themes/effects' as effects;

	.disclosure-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: spacing.$unit spacing.$unit;
		margin: 0 calc(spacing.$unit * -1);
		border-radius: layout.$item-corner;
		font-size: typography.$font-regular;
		min-height: calc(spacing.$unit * 5);
		background: transparent;
		border: none;
		cursor: pointer;
		text-align: left;
		transition: background-color effects.$duration-quick ease;

		&:hover:not(.disabled) {
			background: colors.$grey-90;
		}

		&:active:not(.disabled) {
			background: colors.$grey-85;
		}

		&.disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}

		.label-container {
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			margin-right: spacing.$unit-2x;
			gap: spacing.$unit-fourth;
		}

		.label {
			font-weight: typography.$medium;
			color: colors.$grey-30;
		}

		.sublabel {
			font-size: typography.$font-small;
			color: colors.$grey-60;
			font-weight: typography.$normal;
		}

		.value-area {
			display: flex;
			align-items: center;
			gap: spacing.$unit-half;
			color: colors.$grey-50;
			flex-shrink: 0;
		}

		.value {
			font-size: typography.$font-regular;
			color: colors.$grey-50;
		}

		// Element-colored value
		&.element-wind .value {
			color: colors.$wind-text-20;
		}
		&.element-fire .value {
			color: colors.$fire-text-20;
		}
		&.element-water .value {
			color: colors.$water-text-20;
		}
		&.element-earth .value {
			color: colors.$earth-text-20;
		}
		&.element-dark .value {
			color: colors.$dark-text-20;
		}
		&.element-light .value {
			color: colors.$light-text-20;
		}
	}
</style>
