'use client'

import React from 'react'

interface DetectorDataPoint {
  value: number
  label?: string
  timestamp?: string
  status?: string
}

interface DetectorChartProps {
  className?: string
  data?: DetectorDataPoint[]
  type?: 'line' | 'bar'
}

const DetectorChart: React.FC<DetectorChartProps> = ({ 
  className = '', 
  type = 'line' 
}) => {
  if (type === 'bar') {
    const barData = [
      { value: 85, label: 'Янв' },
      { value: 70, label: 'Фев' },
      { value: 90, label: 'Мар' },
      { value: 65, label: 'Апр' },
      { value: 80, label: 'Май' },
      { value: 95, label: 'Июн' }
    ]

    return (
      <div className={`w-full h-full ${className}`}>
        <svg className="w-full h-full" viewBox="0 0 400 200">
          <g>
            {barData.map((bar, index) => {
              const barWidth = 50
              const barSpacing = 15
              const x = index * (barWidth + barSpacing) + 20
              const barHeight = (bar.value / 100) * 150
              const y = 160 - barHeight
              
              return (
                <g key={index}>
                  <rect
                    x={x}
                    y={y}
                    width={barWidth}
                    height={barHeight}
                    fill="rgb(42, 157, 144)"
                    rx="4"
                    ry="4"
                  />
                  <text
                    x={x + barWidth / 2}
                    y={180}
                    textAnchor="middle"
                    fill="#71717a"
                    fontSize="12"
                  >
                    {bar.label}
                  </text>
                </g>
              )
            })}
          </g>
        </svg>
      </div>
    )
  }
 
  return (
    <div className={`w-full h-full ${className}`}>
      <svg className="w-full h-full" viewBox="0 0 400 200">
        <defs>
          <linearGradient id="detectorGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgb(231, 110, 80)" stopOpacity="0.3" />
            <stop offset="100%" stopColor="rgb(231, 110, 80)" stopOpacity="0" />
          </linearGradient>
        </defs> 
        <path
          d="M20,150 L80,120 L140,100 L200,80 L260,90 L320,70 L380,60 L380,180 L20,180 Z"
          fill="url(#detectorGradient)"
        /> 
        <path
          d="M20,150 L80,120 L140,100 L200,80 L260,90 L320,70 L380,60"
          stroke="rgb(231, 110, 80)"
          strokeWidth="2"
          fill="none"
        /> 
        <circle cx="20" cy="150" r="3" fill="rgb(231, 110, 80)" />
        <circle cx="80" cy="120" r="3" fill="rgb(231, 110, 80)" />
        <circle cx="140" cy="100" r="3" fill="rgb(231, 110, 80)" />
        <circle cx="200" cy="80" r="3" fill="rgb(231, 110, 80)" />
        <circle cx="260" cy="90" r="3" fill="rgb(231, 110, 80)" />
        <circle cx="320" cy="70" r="3" fill="rgb(231, 110, 80)" />
        <circle cx="380" cy="60" r="3" fill="rgb(231, 110, 80)" />
      </svg>
    </div>
  )
}

export default DetectorChart