<script lang="ts">
	import { cn } from '$lib/utils';

	type CategoryVariant = 'default' | 'uncat' | 'transfer';

	let {
		date,
		payeeName,
		payeeNote = '',
		account,
		category,
		categoryVariant = 'default' as CategoryVariant,
		amount,
		isPositive = false
	}: {
		date: string;
		payeeName: string;
		payeeNote?: string;
		account: string;
		category: string;
		categoryVariant?: CategoryVariant;
		amount: string;
		isPositive?: boolean;
	} = $props();

	const pillVariantClass: Record<CategoryVariant, string> = {
		default: 'txn-cat-pill--default',
		uncat: 'txn-cat-pill--uncat',
		transfer: 'txn-cat-pill--transfer'
	};
</script>

<div class="txn-row">
	<div class="txn-date">{date}</div>
	<div class="txn-payee">
		<div class="txn-payee-name">{payeeName}</div>
		{#if payeeNote}
			<div class="txn-payee-note">{payeeNote}</div>
		{/if}
	</div>
	<div class="txn-account">{account}</div>
	<div class="txn-category">
		<span class={cn('txn-cat-pill', pillVariantClass[categoryVariant])}>
			{category}
		</span>
	</div>
	<div class={cn('txn-amount', isPositive ? 'txn-amount--pos' : 'txn-amount--neg')}>
		{amount}
	</div>
</div>

<style>
	.txn-row {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 14px 16px;
		transition: background var(--transition, 180ms ease);
		cursor: default;
	}

	.txn-row:hover {
		background: var(--card-hover);
	}

	.txn-row + :global(.txn-row) {
		border-top: 1px solid var(--border);
	}

	.txn-date {
		font-size: var(--text-sm);
		color: var(--text-3);
		width: 56px;
		flex-shrink: 0;
	}

	.txn-payee {
		flex: 1.5;
		min-width: 0;
	}

	.txn-payee-name {
		font-size: var(--text-base);
		font-weight: 500;
		color: var(--text-1);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.txn-payee-note {
		font-size: var(--text-sm);
		color: var(--text-4);
		margin-top: 1px;
	}

	.txn-account {
		flex: 1;
		font-size: var(--text-sm);
		color: var(--text-3);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.txn-category {
		flex: 1;
	}

	.txn-cat-pill {
		display: inline-block;
		padding: 4px 10px;
		border-radius: 6px;
		font-size: var(--text-sm);
		font-weight: 500;
	}

	.txn-cat-pill--default {
		background: var(--accent-dim);
		color: var(--accent);
	}

	.txn-cat-pill--uncat {
		background: var(--warning-bg);
		color: var(--warning);
	}

	.txn-cat-pill--transfer {
		background: rgba(59, 130, 246, 0.1);
		color: #3b82f6;
	}

	.txn-amount {
		font-family: var(--mono);
		font-size: var(--text-base);
		font-weight: 500;
		text-align: right;
		min-width: 80px;
	}

	.txn-amount--pos {
		color: var(--success);
	}

	.txn-amount--neg {
		color: var(--error);
	}
</style>
