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

import Timeline from "@/components/Timeline";

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}>
      <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: 20,
          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>{"<Timeline />"}</code>
      </h2>
      <Timeline data={mockTimelineData} width={800} />
    </div>
  );
}