import React from "react";
import styled from "styled-components";
import { Committee } from "@views/ContactsPage/ContactsPageView";
import { colors } from "@theme/colors";
import ContactCard from "./ContactCard";

const blank_profile = "/img/blank_profile.png";

interface CommitteeContainerProps {
  committee: Committee;
}

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: ${colors.darkBlue};

  & > p {
    display: flex;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 0.75;
    font-weight: bold;
  }

  & > div {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }
`;

const CommitteeContainer: React.FC<CommitteeContainerProps> = ({ committee }) => (
  <Container>
    <p>
      {committee.name_fi || committee.name_en}
    </p>
    <div>
      {committee.roles.map((role) => (
        role.representatives.map((representative) => (
          <ContactCard
            key={representative.name}
            name={representative.name}
            phone={representative.phone_number}
            email={representative.email}
            // conditional image for dev
            image={(committee.name_en === "Board" && representative.image) ? representative.image : blank_profile}
            role_fi={role.name_fi}
            role_en={role.name_en}
          />
        ))
      ))}
    </div>
  </Container>
);

export default CommitteeContainer;