Bar Chart

"use client"

import { useMemo, useRef } from "react"
import { BarChart } from "@/components/jk/bar-chart"
import { Card, CardBody, CardDescription, CardHeader, CardTitle } from "@/components/jk/card"
import { useIsMobile } from "@/hooks/use-mobile"

type EngagementPoint = {
  day: string
  likes: number
  comments: number
  shares: number
}

function generateData(): EngagementPoint[] {
  return Array.from({ length: 7 }, (_, i) => ({
    day: `Day ${i + 1}`,
    likes: Math.floor(100 + Math.random() * 300),
    comments: Math.floor(20 + Math.random() * 80),
    shares: Math.floor(10 + Math.random() * 50),
  }))
}

export const ChartBarDemo = () => {
  const isMobile = useIsMobile()
  const dataRef = useRef<EngagementPoint[] | null>(null)
  
  const engagementData = useMemo(() => {
    if (!dataRef.current) {
      dataRef.current = generateData()
    }
    return dataRef.current
  }, [])

  return (
    <Card className="w-full max-w-xl">
      <CardHeader className="border-b border-border">
        <CardTitle>Bar Chart</CardTitle>
        <CardDescription>
          A bar chart is a chart that uses bars to show comparisons between categories of data. The bars can be displayed horizontally or vertically.
        </CardDescription>
      </CardHeader>
      <CardBody className="pt-(--gutter)">
        <BarChart
          containerHeight={isMobile ? 190 : 260}
          data={engagementData}
          dataKey="day"
          xAxisProps={{ interval: 0 }}
          config={{
            likes: { label: "Likes" },
            comments: { label: "Comments" },
            shares: { label: "Shares" },
          }}
        />
      </CardBody>
    </Card>
  )
}