import { ChevronDown, ChevronUp } from 'lucide-preact';
import type { I_LedgerRowConfig } from "@ledger/ui/LedgerTable.tsx";

interface I_LedgerRow {
  ledger: Ledger.Ledger<any>,
  entry: Ledger.Entry
  config?: I_LedgerRowConfig
}

export function LedgerRow({ ledger, entry, config: { show_button = true, show_icons = true } = {} }: I_LedgerRow) {
  return (
    <li className="list-row">
    <div className={`${(entry.amount.toString().length > 3) ? "text-2xl" : "text-4xl"} font-thin opacity-30 tabular-nums text-right w-14 overflow-hidden text-ellipsis whitespace-nowrap`}>{ entry.amount }</div>
    { show_icons && (
      entry.amount > 0 ?
        <div className='text-secondary'><ChevronUp size={48} /></div>
        :
        <div className='text-primary'><ChevronDown size={48} /></div>
    )}
    <div className="list-col-grow" title={entry.id?.toString()}>
      <div>{ entry.key }</div>
      <div className="text-xs uppercase font-semibold opacity-60">{ entry.description || entry.reason } - { entry.source }</div>
    </div>
    { show_button && (
      <a className="btn btn-square btn-ghost" href={`/${ledger.slug_plural}/user/${entry.id}`}>
        <svg className="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
      </a>
    )}
  </li>
  );
}