<template>
  <div class="w-20 h-10">
    <Line :data="chartData" :options="chartOptions" />
  </div>
</template>

<script setup lang="ts">
import { Line } from 'vue-chartjs'
import {
  Chart as ChartJS,
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Filler
} from 'chart.js'

ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale, Filler)

const props = defineProps<{
  data: number[]
}>()

const isUptrend = computed(() => {
  if (props.data.length < 2) return true
  return props.data[props.data.length - 1] >= props.data[0]
})

const lineColor = computed(() => isUptrend.value ? '#22c55e' : '#ef4444')

const chartData = computed(() => ({
  labels: props.data.map((_, i) => i.toString()),
  datasets: [{
    data: props.data,
    borderColor: lineColor.value,
    backgroundColor: `${lineColor.value}20`,
    borderWidth: 1.5,
    fill: true,
    tension: 0.3,
    pointRadius: 0
  }]
}))

const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: { display: false },
    tooltip: { enabled: false }
  },
  scales: {
    x: { display: false },
    y: { display: false }
  },
  elements: {
    line: { borderCapStyle: 'round' as const }
  }
}
</script>
