import { useCurrency } from '@/hooks/useCurrency';

export default function AccountingMock() {
    const { convert, current } = useCurrency();
    // Journal amounts share the currency's decimal precision so the
    // Dr/Cr columns line up (184.00 / 174.80 / 9.20, not 184 / 174.8).
    const n = (amountBase: number) =>
        convert(amountBase).toLocaleString('en-US', {
            minimumFractionDigits: current.decimals,
            maximumFractionDigits: current.decimals,
        });

    return (
        <div className="pf-mock w-full max-w-[320px]">
            <div className="border-border flex items-center justify-between border-b px-4 py-3">
                <p className="text-foreground text-xs font-semibold">
                    Journal #JE-001847
                </p>
                <span className="bg-primary/10 text-primary rounded-full px-2 py-0.5 text-[9px] font-semibold">
                    Posted
                </span>
            </div>
            <div className="p-4">
                <div className="mb-2 grid grid-cols-[1.4fr_1fr_1fr] gap-1 px-2">
                    {['Account', 'Dr', 'Cr'].map((h, i) => (
                        <span
                            key={h}
                            className={`text-muted-foreground text-[9px] font-semibold tracking-wide uppercase ${i > 0 ? 'text-right' : ''}`}
                        >
                            {h}
                        </span>
                    ))}
                </div>
                {[
                    { account: 'Loan Receivable', dr: n(200), cr: '—' },
                    { account: 'Cash — Branch', dr: '—', cr: n(190) },
                    { account: 'Processing Fee Inc.', dr: '—', cr: n(10) },
                ].map((row) => (
                    <div
                        key={row.account}
                        className="bg-muted/60 mb-1 grid grid-cols-[1.4fr_1fr_1fr] items-center gap-1 rounded-lg px-2 py-1.5"
                    >
                        <span className="text-foreground/75 truncate text-[10px]">
                            {row.account}
                        </span>
                        <span className="pf-mono text-foreground/70 text-right text-[10px] tabular-nums">
                            {row.dr}
                        </span>
                        <span className="pf-mono text-foreground/70 text-right text-[10px] tabular-nums">
                            {row.cr}
                        </span>
                    </div>
                ))}
                <div className="bg-primary/8 mt-2.5 flex items-center justify-between rounded-lg px-2 py-1.5">
                    <span className="text-primary text-[10px] font-semibold">
                        Balanced ✓
                    </span>
                    <span className="pf-mono text-foreground text-[10px] font-semibold tabular-nums">
                        {n(200)}
                    </span>
                </div>
            </div>
        </div>
    );
}