import Category from '../../types/category';
import Gbp from '../../types/currency/gbp';
import Histogram from '../histogram/Histogram'
import './App.css'

function App() {
  return (
    <>
      <Histogram categories={categories} />
    </>
  )
}

const categories: Category[] = [
  {
    id: 0,
    name: 'Groceries',
    currentBalance: new Gbp(71, 37, 1),
    currentBudget: {
      quantity: new Gbp(65, 0, 1),
      period: 7,
    },
  },
  {
    id: 1,
    name: 'Stationery',
    currentBalance: new Gbp(10, 12, -1),
    currentBudget: {
      quantity: new Gbp(12, 0, 1),
      period: 30,
    },
  },
  {
    id: 2,
    name: 'Holidays',
    currentBalance: new Gbp(325, 0, 1),
    currentBudget: {
      quantity: new Gbp(1000, 0, 1),
      period: 365,
    },
  },
  {
    id: 3,
    name: 'Wages',
    currentBalance: new Gbp(1025, 60, -1),
    currentBudget: {
      quantity: new Gbp(2167, 7, -1),
      period: 30.25,
    },
  },
].map(c => ({ ...c, balanceToBudgetRatio: c.currentBalance.valueOf() / c.currentBudget.quantity.valueOf() }));

export default App