import { useRouter } from "next/router";

import { Blockquote, Space } from "@mantine/core";

import parse from "html-react-parser";

import philosophy from "../content/philosophy";

export default function Philosophy() {
  const { locale } = useRouter();

  return (
    <>
      {philosophy.map((entry, i) => (
        <div key={i}>
          <h2 style={{ margin: 0 }}>{entry.title[locale || "en"]}</h2>

          <Blockquote cite={"— " + entry.source} color="orange">
            {entry.summary[locale || "en"]}
          </Blockquote>

          {entry.definition[locale || "en"].map((def) => (
            <>
              <p>{parse(def)}</p>
              <Space h="xs" />
            </>
          ))}

          <Space h="md" />
          <p>{parse(entry.examples[locale || "en"])}</p>

          <Space h="xl" />
          <Space h="xl" />
        </div>
      ))}
    </>
  );
}