<script setup lang="ts">
const props = defineProps<{
  diff: string
}>()

interface DiffLine {
  text: string
  type: 'added' | 'removed' | 'header' | 'context'
}

const parsedLines = computed((): DiffLine[] => {
  if (!props.diff) return []

  return props.diff.split('\n').map((line) => {
    if (line.startsWith('@@')) {
      return { text: line, type: 'header' as const }
    }
    if (line.startsWith('+')) {
      return { text: line, type: 'added' as const }
    }
    if (line.startsWith('-')) {
      return { text: line, type: 'removed' as const }
    }
    return { text: line, type: 'context' as const }
  })
})

function lineClass(type: DiffLine['type']): string {
  switch (type) {
    case 'added':
      return 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-300'
    case 'removed':
      return 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-300'
    case 'header':
      return 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 font-semibold'
    default:
      return 'text-gray-700 dark:text-gray-300'
  }
}
</script>

<template>
  <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
    <pre class="text-xs font-mono leading-relaxed overflow-x-auto"><template
      v-for="(line, index) in parsedLines"
      :key="index"
    ><div
        :class="['px-4 py-0.5', lineClass(line.type)]"
      >{{ line.text }}</div></template></pre>
  </div>
</template>
