<script lang="ts">
	import Icon from '$frontend/components/common/display/Icon.svelte';
	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
	import { requestRevealFile } from '$frontend/stores/core/files.svelte';
	import { getVisiblePanels, workspaceState } from '$frontend/stores/ui/workspace.svelte';

	function handleClick() {
		const visiblePanels = getVisiblePanels(workspaceState.layout);
		if (visiblePanels.includes('files')) {
			requestRevealFile(filePath);
		}
	}

	interface Props {
		filePath: string;
		fileName?: string;
		iconColor?: string;
		badges?: Array<{ text: string; color: string }>;
		box?: boolean;
	}

	const { filePath, fileName, iconColor, badges = [], box = true }: Props = $props();

	const displayFileName = $derived(fileName || filePath.split(/[/\\]/).pop() || filePath);
</script>

<div class={box ? "bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3" : ""}>
	<button
		type="button"
		class="flex items-center gap-3 mb-1 w-full text-left hover:opacity-80 transition-opacity cursor-pointer"
		onclick={handleClick}
		title="Reveal in Files panel"
	>
		<Icon
			name={getFileIcon(displayFileName)}
			class="w-6 h-6 {iconColor || ''}"
		/>
		<div class="flex-1 min-w-0">
			<h3 class="font-medium text-slate-900 dark:text-slate-100 truncate">
				{displayFileName}
			</h3>
			<p class="text-xs text-slate-600 dark:text-slate-400 truncate" title={filePath}>
				{filePath}
			</p>
		</div>
	</button>

	{#if badges.length > 0}
		<div class="flex gap-2 mt-3">
			{#each badges as badge}
				<div class="text-3xs px-2 py-0.5 rounded {badge.color}">
					{badge.text}
				</div>
			{/each}
		</div>
	{/if}
</div>
