import React, { FunctionComponent, useState } from 'react';
import { DecisionSupportFile } from '../../types/decision';

export interface ClarificationSectionProps {
  dsf: DecisionSupportFile,
};

export const ClarificationSection: FunctionComponent<ClarificationSectionProps> = ({ dsf }) => {
  return (
    <section>
      <div className="box">
        <div className="field">
          <label className="label">Intitulé du dossier</label>
          <div className="control">
            <input className="input" type="text" />
          </div>
        </div>
        <div className="field">
          <label className="label">Quelle décision devons nous prendre ?</label>
          <div className="control">
            <textarea className="textarea" placeholder="Décrire globalement les tenants et aboutissants de la décision à prendre." rows={10}></textarea>
          </div>
          <p className="help is-info"><i className="fa fa-info-circle"></i> Ne pas essayer de rentrer trop dans les détails ici. Préférer l'utilisation des annexes et y faire référence.</p>
        </div>
        <div className="field">
          <label className="label">Pourquoi devons nous prendre cette décision ?</label>
          <div className="control">
            <textarea className="textarea" placeholder="Décrire pourquoi il est important de prendre cette décision." rows={10}></textarea>
          </div>
          <p className="help is-info"><i className="fa fa-info-circle"></i> Penser à indiquer si des obligations légales pèsent sur cette prise de décision.</p>
        </div>
        <div className="field">
          <label className="label">Portée de la décision</label>
          <div className="control">
            <div className="select">
              <select>
                <option></option>
                <option>Individuelle</option>
                <option>Groupe identifié</option>
                <option>Collective</option>
              </select>
            </div>
          </div>
        </div>
        <div className="field">
          <label className="label">Nature de la décision</label>
          <div className="control">
            <div className="select">
              <select>
                <option></option>
                <option>Opérationnelle</option>
                <option>Tactique</option>
                <option>Stratégique</option>
              </select>
            </div>
          </div>
        </div>
        <div className="field">
          <label className="label">Existe t'il une échéance particulière pour cette décision ?</label>
          <div className="control">
            <input className="input" type="date" />
          </div>
        </div>
      </div>
    </section>
  );
};