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

import { QuotationCarousel } from "@/components/QuotationCarousel";

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>
      <h2>
        <code>{"<PieChart />"}</code>
      </h2>
      <div style={{ padding: "30px" }}>
        <PieChart data={mockPieData} width={800} labelWidth={215} />
      </div>
      <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,
        }}
      />

      <h2>
        <code>{"<QuotationCarousel />"}</code>
      </h2>
      <div className={styles.quotationCarouselDemo}>
        <QuotationCarousel data={mockQuoteData} circleDiameter={0} />
        <QuotationCarousel
          data={mockQuoteDataLong}
          width={800}
          height={160}
          circleDiameter={180}
        />
      </div>
    </div>
  );
}