<script setup lang="ts">
defineProps<{
  actionLabel: string
  loading: boolean
  error: string
  compact?: boolean
}>()

const emit = defineEmits<{
  accept: []
  reject: []
}>()
</script>

<template>
  <div
    class="flex items-center gap-2 bg-surface-light-alt dark:bg-surface-alt border-b border-border-light dark:border-slate-700"
    :class="compact ? 'px-3 py-2' : 'px-4 py-3'"
  >
    <svg class="w-3.5 h-3.5 text-accent-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
    </svg>
    <span :class="compact ? 'text-xs' : 'text-sm'" class="font-medium text-slate-600 dark:text-slate-300">AI Suggestion</span>
    <span :class="compact ? 'text-[11px]' : 'text-xs'" class="text-slate-400 dark:text-slate-500">&mdash; {{ actionLabel }}</span>
    <span v-if="loading" class="flex items-center gap-1 text-xs text-slate-500">
      <svg class="animate-spin h-3 w-3" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
      </svg>
    </span>
    <span v-if="error" class="text-xs text-red-500">{{ error }}</span>
    <div class="ml-auto flex items-center gap-2">
      <button
        class="px-3 py-1 text-xs font-medium rounded-md bg-accent-500 text-white hover:bg-accent-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        :disabled="loading || !!error"
        @click="emit('accept')"
      >
        Accept
      </button>
      <button
        class="px-3 py-1 text-xs font-medium rounded-md border border-border-light dark:border-slate-600 text-slate-600 dark:text-slate-400 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated transition-colors"
        @click="emit('reject')"
      >
        {{ error ? 'Dismiss' : 'Reject' }}
      </button>
    </div>
  </div>
</template>
