import React, { Children } from "react";

import PageBreakAvoid from "../common/PageBreakAvoid";
import { Spacer } from "../common/Spacer";
import { Paragraph } from "../common/Text";

type SkillProps = {
  title: string;
};

const Skill: React.FC<React.PropsWithChildren<SkillProps>> = (props) => {
  const { children, title } = props;

  return (
    <PageBreakAvoid>
      <strong>{title}</strong>
      <Spacer />
      {Children.map(children, (c) => (
        <Paragraph>{c}</Paragraph>
      ))}
    </PageBreakAvoid>
  );
};

export default Skill;