<template>
  <div class="grid grid-cols-1 items-start gap-6">
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Simple (3 sites) + event change</h2>
      <MalioSiteSelector v-model="simpleValue" :sites="sites" @change="onSiteChange" />
      <p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ simpleValue }}</code></p>
      <p class="mt-1 text-sm text-gray-600">Dernier event <code>change</code> : <code>{{ lastChange }}</code></p>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Deux sites</h2>
      <MalioSiteSelector v-model="twoValue" :sites="sitesTwo" />
      <p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ twoValue }}</code></p>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Cinq sites (largeur proportionnelle)</h2>
      <MalioSiteSelector v-model="fiveValue" :sites="sitesFive" />
      <p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ fiveValue }}</code></p>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Non contrôlé (sans v-model)</h2>
      <MalioSiteSelector :sites="sites" />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Largeur contrainte</h2>
      <div class="w-[480px]">
        <MalioSiteSelector v-model="constrainedValue" :sites="sites" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const sites = [
  { id: 'chatellerault', name: 'Châtellerault', color: '#0055ff' },
  { id: 'saint-jean', name: 'Saint-Jean', color: '#16a34a' },
  { id: 'pommevic', name: 'Pommevic', color: '#dc2626' },
]

const sitesTwo = [
  { id: 'nord', name: 'Usine Nord', color: '#7c3aed' },
  { id: 'sud', name: 'Usine Sud', color: '#ea580c' },
]

const sitesFive = [
  { id: 's1', name: 'Site 1', color: '#0ea5e9' },
  { id: 's2', name: 'Site 2', color: '#14b8a6' },
  { id: 's3', name: 'Site 3', color: '#f59e0b' },
  { id: 's4', name: 'Site 4', color: '#ec4899' },
  { id: 's5', name: 'Site 5', color: '#6366f1' },
]

const simpleValue = ref('chatellerault')
const twoValue = ref('nord')
const fiveValue = ref('s3')
const constrainedValue = ref('saint-jean')
const lastChange = ref<string>('—')

function onSiteChange(site: { id: string; name: string; color: string }) {
  lastChange.value = JSON.stringify(site)
}
</script>
