/* @flow */

import Distribution from 'Components/Distribution';
import PaySlip from 'Components/PaySlip';
import React, { Component } from 'react';
import { Trans } from 'react-i18next';

type Props = {
	arePreviousAnswers: boolean,
	conversationStarted: boolean,
	startConversation: () => void,
	period: 'mois' | 'année'
}
export default class SalaryFirstExplanation extends Component<Props> {
	render() {
		return (
			<>
				<h2>
					<Trans>À quoi servent mes cotisations ?</Trans>
				</h2>
				<Distribution />

				{!(this.props.arePreviousAnswers && this.props.conversationStarted) && (
					<>
						<h2>
							<Trans>Simulation personnalisée</Trans>
						</h2>
						<p>
							<Trans i18nKey="custom-simulation">
								Il s'agit pour l'instant d'une
								<strong> première estimation</strong> sur la base d'un contrat
								générique. La législation française prévoit une multitude de cas
								particuliers et de règles spécifiques qui modifient
								considérablement les montants de l'embauche.
							</Trans>
						</p>
						<p style={{ textAlign: 'center' }}>
							<button
								className="ui__ button"
								onClick={this.props.startConversation}>
								<Trans>Faire une simulation personnalisée</Trans>
							</button>
						</p>
					</>
				)}
				<h2>
					<Trans>
						{this.props.period === 'mois'
							? 'Fiche de paie mensuelle'
							: 'Détail annuel des cotisations'}
					</Trans>
				</h2>
				<PaySlip />
			</>
		)
	}
}