/* eslint-disable react/destructuring-assignment */
// import { ArrowDownCircle, ArrowUpCircle, DollarSign, Icon, TrendingDown } from 'lucide-react';
import * as Icons from 'lucide-react';
import { useSelector } from 'react-redux';

import type { RootState } from '../../../../ReduxState/store';
import type { CompanyDbModel } from '../../../Companies/Components/CompaniesComponents.helper';
import styles from './SingleInfoTab.module.scss';

interface SingleInfoTabInterface {
	Icon?: string;
	Theme?: string;
	heading?: string;
	title: string;
	price: string;
	priceAsCurrency: boolean;
}

const SingleInfoTab = (props: SingleInfoTabInterface): JSX.Element => {
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	const currencyLabel = `${
		typeof selectedCompany?.currency_symbol === 'string'
			? 'GBP'
			: selectedCompany?.currency_symbol.value
	}`;

	const formatPrice = (price: number): string => {
		const formattedPrice = price.toLocaleString('en-GB', {
			style: 'currency',
			currency: currencyLabel,
			minimumFractionDigits: 2,
			maximumFractionDigits: 2
		});
		return formattedPrice;
	};
	// icon support discontinued on client's request
	// const IconComponent = (props.Icon && Icons[props.Icon]) || Icons.DollarSign;
	return (
		<div className={`${styles['finance-card']} pt-4 ${styles[props.Theme || 'green']}`}>
			<div className={styles['card-header']}>
				{/* <div className={styles['card-icon']}>
					<IconComponent className={styles.icon} />
				</div> */}
				{props.heading && <div>{props.heading.toUpperCase()}</div>}
				<div className={styles['card-value']}>
					{/* {positive ? '' : '-'} */}
					{props.priceAsCurrency ? formatPrice(+props.price) : props.price}{' '}
					{localStorage.getItem('currency') as string}
				</div>
				<div>{props.title.toUpperCase()}</div>
			</div>
		</div>
	);
};

export default SingleInfoTab;