import React from "react";
import { useIntl } from "react-intl";

import { SubHeadline } from "../common/Headline";
import { List, ListItem } from "../common/List";
import PageBreakAvoid from "../common/PageBreakAvoid";
import { Spacer } from "../common/Spacer";
import { Paragraph } from "../common/Text";
import Skill from "./Skill";

type OtherSkill = {
  title: string;
  description?: string;
};

const otherSkills: OtherSkill[] = [
  {
    title: "Strong proficiency in",
    description: "Go, Typescript (and Javascript), Bash, IaaC tools",
  },
  {
    title: "Infrastructure related skills",
    description:
      "Kubernetes and AWS EKS, Containerized applications, Linux system administration, Amazon Web Services - good understanding of Networking, RDS, Queues. Notable experience with GCP/Azure.",
  },
  {
    title: "Databases",
    description: "PostgreSQL, MySQL/MariaDB",
  },
  {
    title: "Some of the relevant Frameworks/Tooling",
    description:
      "Terraform, Prometheus, Grafana, Nix shell, React, Webpack, Rollup, Esbuild, deep understanding of Git",
  },
  {
    title: "Software Development",
    description:
      "Played with various programming and scripting languages such as Python, Lua, bash, C++, often for embedded devices",
  },
  {
    title: "SmartHome installations",
    description: "KNX, Control4 with custom driver development",
  },
  {
    title: "Spoken languages",
    description: "Czech native, English",
  },
];

const Skills: React.FC = () => {
  const intl = useIntl();

  return (
    <>
      <Skill title="DevOps">
        {intl.formatMessage({
          defaultMessage:
            "Several years of experience developing, maintaining and adhering to the DevOps practices to streamline organization's processes across both backend and frontend development.",
          id: "Skills.devops",
        })}
      </Skill>
      <Skill title="Front-End Development">
        {intl.formatMessage({
          defaultMessage:
            "Extensive experience in frontend development spanning back to the early 2000s.",
          id: "Skills.frontendDevelopment",
        })}
      </Skill>
      <Skill title="Back-End Development">
        {intl.formatMessage({
          defaultMessage:
            "Deep knowledge of backend operations, mostly supporting web based applications using various technologies, programming languages and frameworks.",
          id: "Skills.backendDevelopmentSum1",
        })}
        {intl.formatMessage({
          defaultMessage:
            "In recent years, the main focus was on Go to write tooling and backend services.",
          id: "Skills.backendDevelopmentSum2",
        })}
      </Skill>
      <Skill title="Infrastructure operations">
        {intl.formatMessage({
          defaultMessage:
            "Throughout my career, I have gained valuable experience in developing and maintaining high-load infrastructures over several years.",
          id: "Skills.infrastructureOperations",
        })}
        {intl.formatMessage({
          defaultMessage:
            "Following the OCI (Open Container Initiative) and leveraging Docker and Kubernetes to create highly available deployments, primarily on the AWS platform, was a challenging and enjoyable experience, that has greatly enhanced my skills in this area.",
          id: "Skills.infrastructureOperationsAdditional",
        })}
      </Skill>
      <Spacer withDivider />
      <SubHeadline level={4}>
        {intl.formatMessage({
          defaultMessage: "Other notable skills",
          id: "Skills.otherNotableSkills",
        })}
      </SubHeadline>
      <List>
        {otherSkills.map((s) => (
          <ListItem key={s.title}>
            <PageBreakAvoid>
              <strong>{s.title}</strong>
              {s.description && `: ${s.description}`}
            </PageBreakAvoid>
          </ListItem>
        ))}
      </List>
      <Paragraph></Paragraph>
    </>
  );
};

export default Skills;