import { Line } from 'react-chartjs-2'
import 'chart.js/auto'
import { useTranslation } from 'react-i18next'
import type { FlightPoint } from './types'

interface Props {
  points: FlightPoint[]
}

export default function AltitudeChart({ points }: Props) {
  const { t } = useTranslation()

  if (points.length === 0) return null

  const data = {
    labels: points.map((_, i) => i + 1),
    datasets: [{
      label: t('flights.planner.altitude'),
      data: points.map(p => p.altitude),
      borderColor: '#228be6',
      backgroundColor: 'rgba(34,139,230,0.2)',
      pointBackgroundColor: '#fd7e14',
      pointBorderColor: '#1e1e1e',
      pointBorderWidth: 1,
      tension: 0.1,
    }],
  }

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: { legend: { display: false } },
    scales: {
      x: { ticks: { font: { size: 10 }, color: '#6c757d' }, grid: { color: '#495057' } },
      y: { ticks: { font: { size: 10 }, color: '#6c757d' }, grid: { color: '#495057' } },
    },
  }

  return (
    <div className="h-16">
      <Line data={data} options={options} />
    </div>
  )
}