<script>"use strict";
import { slide } from "svelte/transition";
import Icon from "./Icon.svelte";
export let items = [];
export let style = "card";
export let icon = void 0;
let activeIndex = 0;
function toggleItem(index) {
  activeIndex = activeIndex === index ? -1 : index;
}
</script>

{#if style === 'card'}
	<div class="spruce-accordion w-full mx-auto bg-white shadow-sm border rounded-lg overflow-hidden">
		{#each items as item, index}
			<div class="spruce-accordion-item border-b border-gray-200 last:border-b-0">
				<button
					on:click={() => toggleItem(index)}
					class="spruce-accordion-item-button w-full p-5 text-left flex justify-between items-center focus:outline-none"
					class:bg-base-100={activeIndex === index}
					class:hover:bg-base-50={activeIndex !== index}
				>
					<div class="inline-flex items-center gap-x-2">
						{#if icon || item.icon}
							<Icon className="spruce-accordion-item-icon" iconName={icon ?? item.icon} size="xs" />
						{/if}
						<h3
							class:font-medium={activeIndex === index}
							class:font-regular={activeIndex !== index}
							class:text-zinc-950={activeIndex === index}
							class:text-stone-600={activeIndex !== index}
						>
							{item.title}
						</h3>
					</div>
					{#if activeIndex === index}
						<Icon className="spruce-accordion-item-chevron-up" iconName="chevron-up" />
					{:else}
						<Icon className="spruce-accordion-item-chevron-down" iconName="chevron-down" />
					{/if}
				</button>
				{#if activeIndex === index}
					<div transition:slide class="spruce-accordion-item-content p-5">
						<p class="text-3xl font-regular text-gray-900">{item.content}</p>
					</div>
				{/if}
			</div>
		{/each}
	</div>
{:else if style === 'links'}
	<div class="w-full mx-auto">
		{#each items as item, index}
			<div
				class:border-b={index !== items.length - 1}
				class:border-gray-200={index !== items.length - 1}
			>
				<button
					on:click={() => toggleItem(index)}
					class="w-full py-4 text-left flex justify-between items-center focus:outline-none"
					class:text-zinc-950={activeIndex === index}
					class:text-stone-600={activeIndex !== index}
					class:border-b={activeIndex === index}
				>
					<div class="inline-flex items-center gap-x-2">
						{#if icon || item.icon}
							<Icon iconName={icon ?? item.icon} size="xs" />
						{/if}
						<p>ola</p>
						<h3
							class:font-medium={activeIndex === index}
							class:font-regular={activeIndex !== index}
						>
							{item.title}
						</h3>
					</div>
					<Icon iconName={activeIndex === index ? 'chevron-up' : 'chevron-down'} />
				</button>
				{#if activeIndex === index}
					<div transition:slide class="py-5">
						<p class="text-3xl font-regular text-gray-900">{item.content}</p>
					</div>
				{/if}
			</div>
		{/each}
	</div>
{:else if style === 'separate'}
	<div class="w-full mx-auto space-y-4">
		{#each items as item, index}
			<div class="bg-white shadow-sm border rounded-lg overflow-hidden">
				<button
					on:click={() => toggleItem(index)}
					class="w-full p-5 text-left flex justify-between items-center focus:outline-none"
					class:bg-base-100={activeIndex === index}
					class:hover:bg-base-50={activeIndex !== index}
				>
					<div class="inline-flex items-center gap-x-2">
						{#if icon || item.icon}
							<Icon iconName={icon ?? item.icon} size="xs" />
						{/if}
						<h3
							class=""
							class:font-medium={activeIndex === index}
							class:font-regular={activeIndex !== index}
							class:text-zinc-950={activeIndex === index}
							class:text-stone-600={activeIndex !== index}
						>
							{item.title}
						</h3>
					</div>
					{#if activeIndex === index}
						<Icon iconName="chevron-up" />
					{:else}
						<Icon iconName="chevron-down" />
					{/if}
				</button>
				{#if activeIndex === index}
					<div transition:slide class="p-5">
						<p class="text-3xl font-regular text-gray-900">{item.content}</p>
					</div>
				{/if}
			</div>
		{/each}
	</div>
{/if}
