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

export interface MetadataPanelProps {
  dsf: DecisionSupportFile,
};

export const MetadataPanel: FunctionComponent<MetadataPanelProps> = ({ dsf }) => {
  return (
    <nav className="panel">
      <p className="panel-heading">
        Métadonnées
      </p>
      <div className="panel-block">
        <div style={{width:'100%'}}>
          <div className="field">
            <div className="label">Groupe de travail</div>
            <div className="control is-expanded">
              <div className="select is-fullwidth">
                <select>
                  <option></option>
                </select>
              </div>
            </div>
          </div>
          <div className="field">
            <div className="label">Statut</div>
            <div className="control is-expanded">
              <div className="select is-fullwidth">
                <select>
                  <option>En préparation</option>
                  <option>Prêt à voter</option>
                  <option>Voté</option>
                </select>
              </div>
            </div>
          </div>
          <div className="field">
            <div className="label">Créé le</div>
            <div className="control">
              <p>--</p>
            </div>
          </div>
          <div className="field">
            <div className="label">Dernière modification</div>
            <div className="control">
              <p>--</p>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};