import { FunctionalComponent, h } from "preact";
import * as style from "./style.css";
import { Project } from "../../models/project";
import { useProjectEstimations } from "../../hooks/use-project-estimations";

export interface FinancialPreviewProps {
    project: Project
}

const FinancialPreview: FunctionalComponent<FinancialPreviewProps> = ({ project }) => {
    const estimations = useProjectEstimations(project);
    const costPerTimeUnit = 500;
    const maxCost = Math.ceil((estimations.p99.e + estimations.p99.sd) * costPerTimeUnit);
    const minCost = Math.ceil((estimations.p99.e - estimations.p99.sd) * costPerTimeUnit);
    return (
        <div class="table-container">
            <table class="table is-bordered is-striped is-fullwidth">
                <thead>
                    <tr>
                        <th colSpan={2}>Prévisionnel financier</th>
                    </tr>
                    <tr>
                        <th class="is-narrow">Temps</th>
                        <th>Coût</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="is-narrow">Maximum</td>
                        <td>~ {maxCost} €</td>
                    </tr>
                    <tr>
                        <td class="is-narrow">Minimum</td>
                        <td>~ {minCost} €</td>
                    </tr>
                </tbody>
            </table>
        </div>
    );
};

export default FinancialPreview;