import AnalysisTrend from './AnalysisTrend';

export default function AnalysisSummaryHeadline(
	props: AnalysisSummaryHeadlineProps
) {
	const { label, trend } = props;

	return (
		<div className="gs-analysis-summary-headline">
			<div className="gs-analysis-summary-headline__values">
				<span className="gs-analysis-summary-headline__value">
					{ props.value }
				</span>
			</div>
			<div className="gs-analysis-summary-headline__label">
				<span className="gs-analysis-summary-headline__label-value">
					{ label }
				</span>
				{ trend && (
					<span className="gs-analysis-summary-headline__trend">
						<AnalysisTrend { ...trend } />
					</span>
				) }
			</div>
		</div>
	);
}