import { Pill } from "models/pill";
import React, { FunctionComponent } from "react";
import { InfoPill } from "./info-pill";
import { SectionTitle } from "./section-title";

type Props = { title: string; pills?: Pill[] };

export const InfoPanel: FunctionComponent<Props> = ({ title, pills }) => {
  return (
    <div className="personal-info col-md-12 no-padding">
      <SectionTitle>{title}</SectionTitle>
      <ul>
        {pills !== undefined &&
          pills.map((pill: Pill) => {
            return <InfoPill title={pill.key} value={pill.value} link={pill.link} key={pill.key} />;
          })}
      </ul>
    </div>
  );
};
