<template>
  <span
    class="grid-eye"
    :class="{ 'grid-eye--off': !on }"
    role="button"
    tabindex="0"
    :title="on ? titleOn : titleOff"
    @click="$emit('toggle')"
    @keydown.enter.prevent="$emit('toggle')"
    @keydown.space.prevent="$emit('toggle')"
  >
    <!-- Oeil ouvert (visible) -->
    <svg v-if="on" viewBox="0 0 24 24" width="18" height="18" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"></path>
      <circle cx="12" cy="12" r="3"></circle>
    </svg>
    <!-- Oeil barre (masque) -->
    <svg v-else viewBox="0 0 24 24" width="18" height="18" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
      <line x1="1" y1="1" x2="23" y2="23"></line>
    </svg>
  </span>
</template>

<script>
export default {
  name: 'EyeToggle',
  props: {
    on: { type: Boolean, default: true },
    titleOn: { type: String, default: 'Masquer' },
    titleOff: { type: String, default: 'Afficher' },
  },
};
</script>
