<script lang="ts">
	import * as Tabs from '$lib/components/ui/tabs/index.js';
	import { metaTitle } from '$lib/stores/metaTitle.svelte.js';
	$metaTitle.title = 'Brands';
	let { data } = $props();

	let brands = $state<[{ id: Number; name: string; slug: string; image: string }]>([
		{ id: 0, name: '', slug: '', image: '' }
	]);

	$effect(() => {
		data?.brand
			?.then((e) => {
				brands = e.brand;
			})
			.catch((e) => console.log(e));
	});

	// $inspect(brands);

	const alphabets = [
		'a',
		'b',
		'c',
		'd',
		'e',
		'f',
		'g',
		'h',
		'i',
		'j',
		'k',
		'l',
		'm',
		'n',
		'o',
		'p',
		'q',
		'r',
		's',
		't',
		'u',
		'v',
		'w',
		'x',
		'y',
		'z'
	];
</script>

<div
	class="mx-auto my-12 flex w-full max-w-screen-2xl flex-col gap-6 px-12 py-4 max-sm:my-4 max-sm:h-auto max-sm:max-w-full max-sm:flex-wrap max-sm:px-6"
>
	<Tabs.Root
		value={brands[0]?.name.slice(0, 1).toLowerCase()}
		class="gap-12"
		orientation={'vertical'}
	>
		<Tabs.List class="flex !h-auto w-full flex-wrap gap-2 bg-transparent">
			{#each alphabets as letter}
				<!-- {#each brands as brand} -->
				<!-- {#if letter === brand?.name.slice(0, 1).toLowerCase()} -->
				<Tabs.Trigger
					disabled={!brands.some((b) => b.name.slice(0, 1).toLowerCase() === letter)}
					value={letter}
					class="h-12 w-12 cursor-pointer rounded-sm bg-gray-100 data-[state=active]:bg-primary data-[state=active]:text-white"
					>{letter.toUpperCase()}</Tabs.Trigger
				>
				<!-- {/if} -->
				<!-- {/each} -->
			{/each}
		</Tabs.List>
		{#each alphabets as letter}
			<Tabs.Content value={letter} class="grid grid-cols-5 gap-4 max-sm:grid-cols-2">
				{#each brands as brand}
					{#if letter === brand?.name.slice(0, 1).toLowerCase()}
						<!-- <a href={`/category/brand/${brand?.id}`}> -->
						<a href={`/category/brands/${brand?.slug}`}>
							<div
								class="flex w-full flex-col gap-4 rounded-md border border-gray-200 p-2 hover:shadow-md hover:transition-all hover:duration-200"
							>
								<img
									src={brand?.image}
									alt={brand?.name}
									class="aspect-square rounded-sm object-contain object-center"
								/>
								<p class="text-center text-lg max-sm:text-sm">
									{brand?.name}
								</p>
							</div>
						</a>
					{/if}
				{/each}
			</Tabs.Content>
		{/each}
	</Tabs.Root>
</div>
