import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import Boxplot from "components/Boxplot";
import {
  mockCategoricalData,
  moreMockCategoricalData,
  mockBoxPlotData
} from "data/mocks";
import React from "react";

import { ColorPalette } from "../components/ColorPalette";
import { WordCloud } from "../components/WordCloud";

import styles from "./playground.module.css";

export default function Home() {
  return (
    <div className={styles.page} suppressHydrationWarning>
      <h1>Playground</h1>
      <p>Show off your components here!</p>
      <ColorPalette />

      <h2>
        <code>{"<BarGraphHorizontal />"}</code>
      </h2>
      <BarGraphHorizontal
        className={styles.barGraphDemo}
        data={mockCategoricalData}
        width={800}
        height={500}
        margin={{
          top: 25,
          bottom: 40,
          left: 150,
          right: 20,
        }}
      />

      <h2>
        <code>{"<BarGraphVertical />"}</code>
      </h2>
      <p>
        <code>{"<BarGraphVertical />"}</code> takes the same props as{" "}
        <code>{"<BarGraphHorizontal />"}</code>.
      </p>
      <BarGraphVertical
        className={styles.barGraphDemo}
        data={mockCategoricalData}
        width={800}
        height={500}
        margin={{
          top: 20,
          bottom: 80,
          left: 60,
          right: 20,
        }}
      />

      <h2>
        <code>{"<WordCloud />"}</code>
      </h2>
      <WordCloud
        data={moreMockCategoricalData.map((word) => ({
          text: word.key,
          value: word.value,
        }))}
      />

      <h2>
        <code>{"<Boxplot />"}</code>
      </h2>
      <Boxplot
        width={600}
        height={400}
        data={mockBoxPlotData}
        margin={{
          top: 20,
          left: 20,
        }}
        strokeWidth={2.5}
        strokeDashArray="10,4"
      />
    </div>
  );
}
