import { JSX } from 'preact/jsx-runtime'
import { Budget } from '../models.ts'
import { Currency } from '../components/Currency.tsx'
import { Percentage } from '../components/Percentage.tsx'

export function BudgetCard(
	{ budget, ...props }:
		& { budget: Budget }
		& JSX.HTMLAttributes<HTMLDivElement>,
) {
	const remainingRatio = 1.0 - (budget.spent / budget.target)
	const bgColor = remainingRatio < 0 ? 'bg-red' : 'bg-green'
	const textColor = remainingRatio < 0 ? 'text-red' : 'text-green'

	return (
		<div
			class='bg-surface0 rounded shadow hover:bg-surface1 transition-colors flex justify-between relative z-0 cursor-pointer'
			{...props}
		>
			<div
				class={`rounded absolute top-0 bottom-0 left-0 ${bgColor} z-[-1] opacity-10`}
				style={`right: ${
					(remainingRatio < 0 ? 0 : (Math.abs(1.0 - remainingRatio))) * 100
				}%;`}
			/>
			<h2
				class={`py-2 px-3 text-2xl flex flex-none max-w-xs items-center ${textColor} truncate`}
			>
				{budget.name}
			</h2>
			<div class={`p-2 pl-0 flex-1 leading-none`}>
				<span class={textColor}>
					<Currency amount={Math.abs(budget.target - budget.spent)} />
					{remainingRatio >= 0 ? ` left ` : ` over `}
				</span>
				<br />
				<small>
					<Currency amount={budget.spent} /> of{' '}
					<Currency amount={budget.target} />
					{' spent '}
					(<Percentage ratio={remainingRatio} /> remaining)
				</small>
			</div>
			{
				/*
			<button class='text-surface1 cursor-grab p-2'>
				<svg
					xmlns='http://www.w3.org/2000/svg'
					fill='none'
					viewBox='0 0 24 24'
					strokeWidth={1.5}
					stroke='currentColor'
					className='size-6'
				>
					<path
						strokeLinecap='round'
						strokeLinejoin='round'
						d='M3.75 9h16.5m-16.5 6.75h16.5'
					/>
				</svg>
			</button>
		*/
			}
		</div>
	)
}