"use client"
import { LineChart, Line, CartesianGrid, XAxis, YAxis, PieChart, Pie } from "recharts"
import { SubComplete } from "./page"
export function SubsChart({ data }: { data: Array<SubComplete> }) {
  const pieData: Array<{ story: string, occurrences: number }> = []
  data.forEach(dataRow => {
    const story = dataRow.story.title
    const exists = pieData.findIndex(pieRow => story === pieRow.story)
    if (exists === -1) {
      //add the story to pieData if it doesn't already exist
      pieData.push({ story: story, occurrences: 0 })
      return
    }
    pieData[exists].occurrences++
  })
  console.log(pieData)



  return (
    <>
      <PieChart width={400} height={400}>
        <Pie data={pieData} dataKey="story" outerRadius={50} fill="teal" />
      </PieChart>




      <LineChart width={400} height={400} data={data}>
        <Line type="monotone" dataKey="id" stroke="#8884d8" />
        <CartesianGrid />
        <XAxis dataKey="submitted" />
        <YAxis />

      </LineChart>
    </>

  )
}