<script lang="ts">
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher<{
		click: void;
	}>();

	export let action: 'edit' | 'delete' | 'view' | 'add' = 'edit';
	export let disabled: boolean = false;
	export let title: string = '';
	export let ariaLabel: string = '';
	export let size: 'sm' | 'md' = 'md';

	function handleClick() {
		if (!disabled) {
			dispatch('click');
		}
	}

	$: baseClasses = 'transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50';

	$: sizeClasses = {
		'sm': 'p-1',
		'md': 'p-2'
	}[size];

	$: actionClasses = {
		'edit': 'text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 focus:ring-indigo-500',
		'delete': 'text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 focus:ring-red-500',
		'view': 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 focus:ring-gray-500',
		'add': 'text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300 focus:ring-green-500'
	}[action];

	$: iconSize = size === 'sm' ? 'h-4 w-4' : 'h-5 w-5';

	$: allClasses = [baseClasses, sizeClasses, actionClasses].join(' ');

	$: iconPaths = {
		'edit': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />',
		'delete': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />',
		'view': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />',
		'add': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />'
	};

	$: defaultTitles = {
		'edit': 'Edit',
		'delete': 'Delete', 
		'view': 'View',
		'add': 'Add'
	};

	$: computedTitle = title || defaultTitles[action];
	$: computedAriaLabel = ariaLabel || `${defaultTitles[action]} item`;
</script>

<button
	type="button"
	class={allClasses}
	{disabled}
	title={computedTitle}
	aria-label={computedAriaLabel}
	on:click={handleClick}
	{...$$restProps}
>
	<svg class={iconSize} fill="none" stroke="currentColor" viewBox="0 0 24 24">
		{@html iconPaths[action]}
	</svg>
</button>