<template>
  <button
    class="w-full text-left p-4 rounded-xl transition-colors flex items-center justify-between"
    :class="buttonClass"
    :disabled="loading"
    @click="$emit('click')"
  >
    <div class="flex items-center gap-3">
      <UIcon
        :name="icon"
        class="w-6 h-6"
      />
      <div>
        <div class="font-bold">{{ title }}</div>
        <div v-if="error" class="text-xs text-red-600 mt-0.5">{{ error }}</div>
        <div v-else-if="done" class="text-xs text-green-700 mt-0.5">Abgeschlossen</div>
      </div>
    </div>
    <UIcon v-if="loading" name="i-heroicons-arrow-path" class="w-5 h-5 animate-spin" />
  </button>
</template>

<script setup lang="ts">
const props = defineProps<{
  title: string;
  done: boolean;
  loading: boolean;
  error?: string | null;
}>();

defineEmits<{
  (e: "click"): void;
}>();

const icon = computed(() => {
  if (props.error) return "i-heroicons-x-circle";
  if (props.done) return "i-heroicons-check-circle-solid";
  return "i-heroicons-circle";
});

const buttonClass = computed(() => {
  if (props.error) return "bg-red-50 text-red-700 ring-1 ring-red-100";
  if (props.done) return "bg-green-50 text-green-700 ring-1 ring-green-100";
  return "bg-white ring-1 ring-gray-200 hover:ring-[var(--rebreak-primary)]/30";
});
</script>
