import React from "react";
import "./CommitteeContainer.scss";
import { Occupation } from "../../models/Contacts";
import ContactCard from "../ContactCard/ContactCard";

export interface CommitteeContainerProps {
  name_fi: string;
  name_en: string;
  contacts: Occupation[];
}
export interface CommitteeContainerState { }

class CommitteeContainer extends React.Component<CommitteeContainerProps, CommitteeContainerState> {
  render() {
    const { name_fi, name_en, contacts } = this.props;
    return (
      <div className="committee-container">
        <div className="committee-name">
          {name_fi}
        </div>
        <div className="committee-name">
          {name_en}
        </div>
        <div className="committee-container__contacts">
          {contacts.map(occupation => (
            occupation.officials.map(official => (
              <ContactCard
                key={official.first_name}
                first_name={official.first_name}
                last_name={official.last_name}
                phone={official.phone_number}
                email={official.email}
                image={official.image}
                role={occupation.role}
              />
            ))
          ))}
        </div>
      </div>
    );
  }
}

export default CommitteeContainer;