'use client'

import React from 'react'

interface ChartDataPoint {
  value: number
  label?: string
  timestamp?: string
}

interface AreaChartProps {
  className?: string
  data?: ChartDataPoint[]
}

const AreaChart: React.FC<AreaChartProps> = ({ className = '' }) => {
  return (
    <div className={`w-full h-full ${className}`}>
      <svg className="w-full h-full" viewBox="0 0 635 200">
        <defs>
          <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgb(42, 157, 144)" stopOpacity="0.3" />
            <stop offset="100%" stopColor="rgb(42, 157, 144)" stopOpacity="0" />
          </linearGradient>
        </defs> 
        <path
          d="M0,180 L100,120 L200,140 L300,80 L400,60 L500,100 L635,90 L635,200 L0,200 Z"
          fill="url(#areaGradient)"
        /> 
        <path
          d="M0,180 L100,120 L200,140 L300,80 L400,60 L500,100 L635,90"
          stroke="rgb(42, 157, 144)"
          strokeWidth="2"
          fill="none"
        /> 
        <circle cx="0" cy="180" r="3" fill="rgb(42, 157, 144)" />
        <circle cx="100" cy="120" r="3" fill="rgb(42, 157, 144)" />
        <circle cx="200" cy="140" r="3" fill="rgb(42, 157, 144)" />
        <circle cx="300" cy="80" r="3" fill="rgb(42, 157, 144)" />
        <circle cx="400" cy="60" r="3" fill="rgb(42, 157, 144)" />
        <circle cx="500" cy="100" r="3" fill="rgb(42, 157, 144)" />
        <circle cx="635" cy="90" r="3" fill="rgb(42, 157, 144)" />
      </svg>
    </div>
  )
}

export default AreaChart