<script lang="ts">
	import NumberStatList from '$lib/components/NumberStatList.svelte';
	import type { INumberStatList } from '$lib/components/NumberStatList.svelte';
	import RiskAnalysis from '$lib/components/dashboard/RiskAnalysis.svelte';
	import StockGraph from '$lib/components/dashboard/StockGraph.svelte';
	import TrendingSymbols from '$lib/components/dashboard/TrendingSymbols.svelte';
	import { onMount } from 'svelte';

	const statsList: INumberStatList[] = [
		{
			name: 'Portefeuille',
			color: 'aqua',
			value: `${Math.random().toFixed(3) * 1000}€`,
			icon: '/icons/wallet.svg'
		},
		{
			name: 'Revenus',
			color: '#1FCB4F',
			value: `${Math.random().toFixed(3) * 1000}€`,
			icon: '/icons/money-bills.svg'
		},
		{
			name: 'Depenses',
			color: 'orange',
			value: `${Math.random().toFixed(3) * 1000}€`,
			icon: '/icons/credit-card.svg'
		},
		{
			name: 'Eco score',
			color: '#1FCB4F',
			value: `${Math.random().toFixed(3) * 1000}`,
			icon: '/icons/leaf.svg'
		}
	];

	onMount(() => {});
</script>

<section class="dashboard-home">
	<NumberStatList {statsList} />
	<div class="home-grid">
		<div class="card overviewGraph">
			<StockGraph />
		</div>
		<!-- <div class="card riskAnalysis">
			<RiskAnalysis />
		</div> -->
		<!-- <div class="card activity">c</div> -->
		<div class="card tendencies">
			<TrendingSymbols />
		</div>
		<!-- <div class="card recentInvestments">e</div> -->
	</div>
</section>

<style>
	.home-grid {
		display: grid;
		grid-template-areas:
			'overviewGraph overviewGraph overviewGraph'
			'tendencies tendencies tendencies';
		gap: 16px;
		width: calc(100% - 32px);
	}

	.overviewGraph {
		grid-area: overviewGraph;
	}
	/* .riskAnalysis {
		grid-area: riskAnalysis;
	}
	.activity {
		grid-area: activity;
	} */
	.tendencies {
		grid-area: tendencies;
	}
	/* .recentInvestments {
		grid-area: recentInvestments;
	} */
</style>
