/* eslint-disable react/destructuring-assignment */
import { useContext, useDeferredValue } from 'react';

import useCurrencyLabel from '../../../../hooks/useCurrencyLabel';
import type { CashFlowAnalysisModel } from '../../../../Store/CashFlowAnalysis/CashFlowSummary/CahsFlowAnalysisSummary-context';
import { CashFlowAnalysisContext } from '../../../../Store/CashFlowAnalysis/CashFlowSummary/CahsFlowAnalysisSummary-context';
import CashFlowCard from './UI/CashFlowCard';

interface SideCardsModel {
	container: string;
	card: string;
	title: string;
}

const SideCards = (props: SideCardsModel): JSX.Element => {
	const cashFlowAnalysisContext: CashFlowAnalysisModel = useContext(CashFlowAnalysisContext);
	const { marginalCashFlow, cashDaysCycle } = cashFlowAnalysisContext;
	// const currency = useDeferredValue(localStorage.getItem('currency') as string);
	const { currencyLabel, currencySign } = useCurrencyLabel();
	const sum = 1;

	return (
		<div className={props.container}>
			<CashFlowCard
				card={props.card}
				classNameTitle={props.title}
				name="Marginal Cash Flow"
				currencyLabel={currencyLabel}
				title={`For your next ${sum.toLocaleString('en-GB', {
					style: 'currency',
					currency: currencyLabel,
					minimumFractionDigits: 0,
					maximumFractionDigits: 0
				})} of sales`}
				value={marginalCashFlow}
			/>
			<CashFlowCard
				card={props.card}
				classNameTitle={props.title}
				name="Days cash cycle"
				title="Your business cycle"
				value={cashDaysCycle}
			/>
		</div>
	);
};

export default SideCards;